'Highcharts remove legend and series from chart on legendItemClick

Highcharts have default functionality to show/hide series on legend click which can be controlled using legendItemClick event.

We have a requirement to remove both the legend and series from the chart when user click on the legend. JQuery solution is not recommended. Leveraging an existing highcharts event would be great.

Any suggestion? Thanks in advance.

jquerychartshighcharts


Solution 1:[1]

You could utilize the legendItemClick to update the series to hide it from the legend.

Your code could look like this (JSFiddle):

legendItemClick: function(e) {
    this.update({ showInLegend: false });
}

This is assuming you have some external mechanism to make it re-appear. If the series will never appear again you could also simply do this.remove() instead of the update.

Solution 2:[2]

You can remove the legend circle icon and name by using,

series: [{ showInLegend: false, }]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Halvor Holsten Strand
Solution 2 Tharindu Marapana

Related Questions