[Solved]-Highcharts Series - want to show/hide all EXCEPT selected series (reversal of default logic)-Highcharts

Forked because I wanted behavior to change. Originally when a user selected two series and then tried to unselect one ... the whole series would swap visibility. I check to see if all other series are "all else visibile" or "all else not visible" first before swapping the visibility for the series.

http://jsfiddle.net/nd0dcdmz/3/

legendItemClick: function(e) {
    var seriesIndex = this.index;
    var series = this.chart.series;

    // test for if all other series besides one selected are visible or not visible
    var allElseVisible = series.every(
      s => (s.index == seriesIndex ? true : s.visible),
    );
    var allElseNotVisible = series.every(
      s => (s.index == seriesIndex ? true : !s.visible),
    );

    // if everything else is deselected or selected ... swap visibility
    // else swap the visibility of selected object.
    if (allElseVisible || allElseNotVisible) {
      series.map(s => {
        if (s.index != seriesIndex) {
          s.visible ? s.hide() : s.show();
        }
      });
    } else {
      return true;
    }

    return false; // overrides default behavior
},

If you want to keep the normal functionality but also be able to show/hide all then create a button or a link for a show_all()/hide_all() javascript method.

this method initializes a counter and starts the showing/hiding:

counter = 0;
setTimeout(process_hide, 1);

function process_hide()
{
    your_chart.series[counter].hide();
    counter+=1;
    if (counter < read_chart.series.length) {
        setTimeout(process_hide, 1);
    }
}

The reason you do this instead of just doing $.each(your_chart, function(i,v){v.hide()}) is that it locks up the UI - using the timeout you'll actually see the series being hidden one by one - and if you want to modify something else - like a process meter, it'll actually work.

Forked index's answer and added functionality to have individual toggles for each series. http://jsfiddle.net/c4Zd8/1/

$.each(allSeries, function(index, series) {
    if (selected == index) {
        if (series.visible == true) {
            series.hide();
        }
        else {
            series.show();
        }
    }
});

Just sharing cause @igor's answer doesn't work on me, so I made adjustments, here's the fiddle (forked from the @igor's answer)

http://jsfiddle.net/index/Nkeep/

I wanted to do something similar... I wanted to have it so that if you control-click (or cmd-click) a legend item, it would hide ALL OTHER items. (But leave normal clicks as their default behavior).

plotOptions: {
    series: {
        events: {
            legendItemClick: function(e) {
                // Upon cmd-click of a legend item, rather than toggling visibility, we want to hide all other items.
                var hideAllOthers = e.browserEvent.metaKey;
                if (hideAllOthers) {
                    var seriesIndex = this.index;
                    var series = this.chart.series;

                    for (var i = 0; i < series.length; i++) {
                        // rather than calling 'show()' and 'hide()' on the series', we use setVisible and then
                        // call chart.redraw --- this is significantly faster since it involves fewer chart redraws
                        if (series[i].index === seriesIndex) {
                            if (!series[i].visible) series[i].setVisible(true, false);
                        } else {
                            if (series[i].visible) series[i].setVisible(false, false);
                        }
                    }
                    this.chart.redraw();
                    return false;
                }
            }
        }
    }
}

Every event in HighCharts contains this value which contains current element (series in this case). You can select all series using this.chart.series and handle them in any way you want. Try this function.

legendItemClick: function(event) {
    if (!this.visible)
        return false;

    var seriesIndex = this.index;
    var series = this.chart.series;

    for (var i = 0; i < series.length; i++)
    {
        if (series[i].index != seriesIndex)
        {
            series[i].visible ?
            series[i].hide() :
            series[i].show();
        } 
    }
    return false;
}

fiddle: https://jsfiddle.net/t2MxW/21971/