Hide series/toggle legend items programmatically (amcharts 4)

Question

In our project we have a Line chart with a legend. Both the chart and its legend are initialized in separate containers (in case this fact matters).

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

We create them both using a createFromConfig method.

What I am trying to achieve: we have a multiple tabs on the page, users usually toggle legend items to show/hide some series. I need to store these toggled legend items so when users go back to the tab with the chart I'll be able to toggle them back programmatically.

From my understanding an algorithm to this is as follows:

1. Store toggled items somewhere
2. When chart is initiated toggle previously toggled items. As far as I know that should be done via showing/hiding series, not legend items.

So far I've managed to store labels by adding a click handler to legend items.

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

But I have no success with hiding previously toggled legend items. I tried to implement something according to this question on stack overflow , I tried to use 'inited', 'hidden', 'shown' events, but there was no reaction to them.

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

Please, point me in the right direction.

Answer 1

Found a solution. Hope that would help someone. We have a Line chart component in the project. I added a toggleSeries prop - a v-model for toggled legend/series items, it stores strings (names). So when we click on a legend item, we put that legend item's name and update the toggleSeries v-model. There is a two-way binding, we can init a chart having already items in toggleSeries array or we can put items from outside of the Line component on-the-go - the chart would be updated.

// Is used for toggling series in 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()
          }
        }
      }
    }

    // Is used for toggling single series items === pushing/removing item names
    // from '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,
    })