Hide all but selected data series, HighCharts

Question

I have some line graphs using Highcharts, and I need to hide everything except the user selected data series. An example page can be found at http://opheliadesign.com/weight .

For example, in the Body Composition section, clicking on Fat will hide Bone, Water and BMI, which will allow you to more easily view the fat chart.

Thanks!

Answer 1

I don't think highcharts has a hideAll() function or a similar function, but you can try something like this:

 //assuming chart is your chart series = chart.series; for(var i = 0; i < series.length; i++) { if(!series[i].selected) { series[i].hide(); //Hide the series } } 

Then you just need to call this code whenever you select a series. Perhaps you could do this by doing some kind of validation using chart events

Answer 2

Pretty old thread, but the information is still useful.

As @Alvara noted, with hundreds of episodes, using .hide() or .show() is pretty slow (the browser freezes for a few seconds).

Using setVisible(false, false) and setVisible(true, false) is faster:

 legendItemClick: function (event) { if (!this.visible) return true; const series = this.chart.series; const serieLen = series.length; if (series.filter(s => s.visible).length === 1) { for (let i = 0; i < serieLen; i += 1) { series[i].setVisible(true, false); } } else { for (let i = 0; i < serieLen; i += 1) { series[i].setVisible(false, false); } series[this.index].setVisible(true, false); } return false; }; 

Even with a large series, it works instantly.

Using .show().hide() in the +50 series already takes more than 2 seconds to switch the visible series ( https://jsfiddle.net/rockshappy/nL5j2rLa/5/ )

Here using setVisible is instant ( https://jsfiddle.net/rockshappy/nL5j2rLa/2/ )