Hide/show all series in Highcharts?

Question

I have like 50 different series, so by default, I have them hidden, so the user simply clicks on the ones he wants to see.

Sometimes, one wants to show all, or hide all, quickly. I cannot figure out how to toggle all on/off. Is this possible at all? I assume so, but cannot figure out a way to do it.

Answer 1

Hide each series using series.setVisible(false, false), reference. - After all series will be hidden call chart.redraw() to redraw chart only once.

Answer 2

this solution is based on http://jsfiddle.net/pGuEv/

  var chart = $('#chart-container').highcharts();
  var $hide_show_all_button = $('#hide_show_all_series_button');

  $hide_show_all_button.click(function() {
    var series = chart.series[0];
    if (series.visible) {
      $(chart.series).each(function(){
        this.setVisible(false, false);
      });
      chart.redraw();
      $hide_show_all_button.html('show all');
    } else {
      $(chart.series).each(function(){
        this.setVisible(true, false);
      });
      chart.redraw();
      $hide_show_all_button.html('hide all');
    }
  });