Programmatically show/hide legend items in amCharts 4

Question

Programmatically show/hide legend items in amCharts 4

The project includes a Line chart with a legend that are initialized in separate containers. Both components are created using a createFromConfig method.

<div ref="chartdiv" />
<div ref="legenddiv" />

My goal is to store toggled legend items as users switch between multiple tabs on the page. When users return to the tab with the chart, I want to programmatically toggle back these items.

The algorithm for achieving this involves:

Storing toggled items
Toggling previously toggled items when the chart is initiated by showing/hiding series, not legend items.

I have successfully stored labels by adding a click handler to legend items.

chart.value.legend.itemContainers.template.events.on('hit', (ev) => {
  toggledItems.push(ev.target.dataItem.name)
})

However, I am facing challenges with hiding previously toggled legend items. I have experimented with 'inited', 'hidden', 'shown' events as suggested in this question on stack overflow, but have not been successful.

// No reaction here ☹️
chart.value.series.template.events.on('hidden', () => {
  console.log('I am hidden')
})

I would appreciate guidance on how to proceed in the right direction.

javascript vue.js amcharts amcharts4

Answer 1

Answer №1

Discovered a resolution that could potentially benefit others. Within our project, we implemented a Line chart component. I introduced a toggleSeries prop - acting as a v-model for managing toggled legend/series items, which stores strings (names). Therefore, when a user clicks on a legend item, the name of that item is stored and the toggleSeries v-model is updated accordingly. This setup allows for two-way binding; the chart can be initialized with predefined items in the toggleSeries array or items can be added externally to the Line component dynamically to update the chart.

// Function for toggling series in the chart's 'beforevalidated' hook
    const toggleSeries = (initial?: boolean) => {
      for (const currentSeries of chart.value.series.values) {
        if (toggledSeriesInternal.value.includes(currentSeries.dataFields.valueY)) {
          if (initial) {
            currentSeries.hidden = true
          }
          else {
            currentSeries.hide()
          }
        }
        else {
          if (initial) {
            currentSeries.hidden = false
          }
          else {
            currentSeries.show()
          }
        }
      }
    }

    // Function for toggling individual series items === adding/removing item names
    // from the 'toggledSeries' array
    const toggleSeriesItem = (itemName: string) => {
      const index = toggledSeriesInternal.value.findIndex(name => name === itemName)
      if (index === -1) {
        toggledSeriesInternal.value = [...toggledSeriesInternal.value, itemName]
      }
      else {
        const newToggledSeries = [...toggledSeriesInternal.value]
        newToggledSeries.splice(index, 1)
        toggledSeriesInternal.value = newToggledSeries
      }
    }

    chart.value.events.on('beforevalidated', () => {
      toggleSeries(true)
    })

    chart.value.legend.itemContainers.template.events.on('hit', (ev) => {
      toggleSeriesItem((ev.target.dataItem as am4core.DataItem & { name: string }).name)
    })

    watch(toggledSeriesInternal, () => {
      toggleSeries()
    }, {
      deep: true,
    })

Answer 2

Discovered a resolution that could potentially benefit others. Within our project, we implemented a Line chart component. I introduced a toggleSeries prop - acting as a v-model for managing toggled legend/series items, which stores strings (names). Therefore, when a user clicks on a legend item, the name of that item is stored and the toggleSeries v-model is updated accordingly. This setup allows for two-way binding; the chart can be initialized with predefined items in the toggleSeries array or items can be added externally to the Line component dynamically to update the chart.

// Function for toggling series in the chart's 'beforevalidated' hook
    const toggleSeries = (initial?: boolean) => {
      for (const currentSeries of chart.value.series.values) {
        if (toggledSeriesInternal.value.includes(currentSeries.dataFields.valueY)) {
          if (initial) {
            currentSeries.hidden = true
          }
          else {
            currentSeries.hide()
          }
        }
        else {
          if (initial) {
            currentSeries.hidden = false
          }
          else {
            currentSeries.show()
          }
        }
      }
    }

    // Function for toggling individual series items === adding/removing item names
    // from the 'toggledSeries' array
    const toggleSeriesItem = (itemName: string) => {
      const index = toggledSeriesInternal.value.findIndex(name => name === itemName)
      if (index === -1) {
        toggledSeriesInternal.value = [...toggledSeriesInternal.value, itemName]
      }
      else {
        const newToggledSeries = [...toggledSeriesInternal.value]
        newToggledSeries.splice(index, 1)
        toggledSeriesInternal.value = newToggledSeries
      }
    }

    chart.value.events.on('beforevalidated', () => {
      toggleSeries(true)
    })

    chart.value.legend.itemContainers.template.events.on('hit', (ev) => {
      toggleSeriesItem((ev.target.dataItem as am4core.DataItem & { name: string }).name)
    })

    watch(toggledSeriesInternal, () => {
      toggleSeries()
    }, {
      deep: true,
    })

Programmatically show/hide legend items in amCharts 4

Answer №1

Similar questions

Ways to calculate a cumulative total on a web form using javascript

Occasionally, the script tags in Next.js fail to load

Tips for maintaining table elements in place using JavaScript

The dynamic combination of jCarousel, jQuery Accordion, and fade in effects

Is it possible to utilize an imported function within the global router.beforeEach in Vue.js?

How can you trigger an event when a table cell is selected and a key is pressed?

Using the forEach method, we can create multiple buttons in ReactJS and also access the onClick handler

Is it possible to successfully pass a parameter from a servlet to a JavaScript function, but encounter issues when trying to view the database

Using jQuery to target form elements that have a specific class assigned to them

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Ways to conceal an animated gif once it has been downloaded?

The timing of jQuery's .load function appears to be off, catching us by surprise

Launch the sidebar window using jQuery

Adding an item to an array in Angular 2 using JavaScript!

Clearing local storage in JavaScript after a certain period of time

Why is the `node-config` configuration undefined within a TypeScript Jest environment?

What is the best way to implement a subquery using EXISTS in Knex?

Issue with Firebase REST API filtering functionality not functioning as expected

Troubleshooting issues with AJAX script and JSON formatted data

Tips for updating the value of an input text field in one HTML table according to a certain value entered in a different input text field located in another HTML table