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

Question

By default Highcharts allows you to click on a data series set to hide it / unhide it.

A much more useful approach would be to do the reverse logic - ie to show only the selected series and hide/unhide the non-selected.

Looking at the example here ( http://jsfiddle.net/t2MxW/14/ ), it is clear one can 'intercept' the the 'legendItemClick' event, I am just not sure how to implement the require logic

One can replace the below script to obtain 3 data sets.

DESIRED SCENARIO: to be able to click on 'apples' and show/hide 'pears' and 'oranges' for example.

================= PASTE START =======================================

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            events: {
                legendItemClick: function(event) {
                    var visibility = this.visible ? 'visible' : 'hidden';
                    if (!confirm('The series is currently '+ 
                                 visibility +'. Do you want to change that?')) {
                        return false;
                    }
                }
            }
        }
    },

    series:[{name: 'apples',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
    {name:'pears',
    data: [19.9, 81.5, 96.4, 119.2, 124.0, 166.0, 155.6, 138.5, 116.4, 144.1, 95.6, 54.4]},

           {name:'oranges',
    data: [119.9, 181.5, 46.4, 219.2, 24.0, 66.0, 255.6, 238.5, 16.4, 44.1, 95.6, 54.4]}
           ]   

});

Answer 1

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/