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/

Answer 2

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;                 }             }         }     } }