Search code examples
eventslegendecharts

own legend and show/hide series echarts

I prepare my own legend with checkboxes for echarts. When a checkbox is clicked, it invokes a special function to remove data from the chart. I remove or add this data from series and reload chart.

However eCharts has own legend with events like legendToggleSelect and select etc. Maybe can I use some functions or maybe dispatchAction to show/hide data instead of add/removing?

I try to use dispatchAction, but it doesnt show/hide, it only start animations.

I use dispatchAction like that:

myChart.dispatchAction({
    type: "legendToggleSelect",
    name: id,

});

But in only start animations, not hide/show series.

Solution

  • Here, I have given example to dispatchAction to show/hide series.

    EXAMPLE

    myChart.dispatchAction({
  type: "legendToggleSelect",
  name:"SERIES_NAME"
});

    NOTE: Use below example if you have your own/custom legend list instead of echarts list.

    FULL EXAMPLE