Hide all but selected data series, HighCharts

Question

I have some line graphs using Highcharts and I need to hide all but the data series selected by the user. A sample page may be found at http://opheliadesign.com/weight.

For example, under Body Composition, clicking on Fat would hide Bone, Water, and BMI - thus allowing for a more easy to view graph of body fat.

Thanks!

Answer 1

I don't believe that highcharts has a hideAll() or similar function, but you could 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 would just need to call that code whenever you select a series. You could probably do this by performing some sort of check using chart events

Answer 2

Pretty old thread, but info still usefull.

As @Alvara pointed out, with hundreds of series, using .hide() or .show() is quite slow (browser freeze few seconds).

Using setVisible(false, false) and setVisible(true, false) is way 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 big series, it works instantaneously.

Using .show().hide() on +50 series already take more than 2 sec to toggle visible series (https://jsfiddle.net/rockshappy/nL5j2rLa/5/)

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