Apexcharts.js: Possibility to set specific series as unselected in legend container

[tforssander]

Hi again,

I've encountered a scenario where I would like to specify specific series as unselected in the legend container. I've tried looking at the documentation and can't seem to find anything related to that, except that it is only possible to hide the legend container.

Thanks!

[junedchhipa]

You mean, if you have a multiple series chart, you want to initialize the chart by having certain series "deselected" like this?

Or you want that series not to show in the legend at all?

[tforssander]

Exactly, I would like to have certain series "deselected" when initialised but keep the series in the legend container, so the user can "select" it again. :)

[junedchhipa]

Well, currently ApexCharts doesn't have this option directly, but you can try a hacky solution.

const legendItem = document.querySelector(".apexcharts-legend-text.apexcharts-legend-series:nth-child(1)")

legendItem.dispatchEvent(new Event('click'))

Will think of adding an option in config in future releases.

[pribilinskiy]

@junedchhipa Such an option would be great! We have too many items in legend and then in the tooltip and limit to e.g. 10 items by initially disabling the rest would be very useful.

[junedchhipa]

A new public method toggleSeries('seriesName') is added since 2.1.4 which will allow you to toggle series visibility programmatically.

You can also create a custom legend and call this method to control the series visibility.

Codepen Demo
Docs

[jgebert]

what about in a REACT apex chart?

[reubenremy]

@junedchhipa How do we utilize this w/ React? It would be great if there was a prop on legend component that would made all the series untoggled by default. Is there a way I can accomplish this?