score:1

Accepted answer

I think what you are after is a way to make only the clicked legend series show. If that is the case you can do it with the plotOptions.series.events.legendItemClick. To have only one series show up initially on the chart (but still show in the legend) you need to set that series' visible property to true and the others to false. If you want to have all series show on initial load that step can be ignored.

To get the toggle working you need to get the index of the legend item you clicked. You then loop through all the series in your chart to find the one that matches that clicked index. When it matches you set series\[i\].show() for the ones that don't you set series.hide().

Here is the basic toggling code:

series: {
    events: {
        legendItemClick: function (event) {
            var seriesIndex = this.index;
            var serie = this.chart.series;
            console.log(seriesIndex);
            for (i = 0; i < serie.length; i++) {                  
                if (serie[i].index == seriesIndex) {
                    serie[i].show();
                    console.log(serie[i].index);
                } else {
                    serie[i].hide();
                }
            }
            return false;
        }
    }
}

And here is a live fiddle.

score:1

When creating chart, just set series.visible = false for series which should be hidden by default.

See docs.


Related Articles