CODEWITHSUNDEEP
javascriptjqueryhighcharts
James
James

Reputation: 557

reverse functionality of highcharts legend

I was wondering if there was any way to change the functionality of the legend shown in the chart.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked/

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

For this example, is it possible that when you click "John", that is the option that is picked and all of the other options are not selected.

enter image description here

right now if you click "John", it deselects that option. So I basically want to reverse the default functionality of it now.

Also would it be possible to add a "Show All" option at the end of the legend?

Upvotes: 3

Views: 1108

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

To make a "Show All" option at the end of the legend you could add an empty series with that name, like this:

series: [{
    // ...
}, { 
    name: 'Show All' 
}]

And then to reverse the legend functionality you can use the legendItemClick event, along with checking for clicks on your dummy series, for example like this:

plotOptions: {
    series: {
        events: {
            legendItemClick: function(event) {
                var s = this.chart.series;
                for(i = 0; i < s.length; i++) {
                    if(this.name == 'Show All' || this == s[i])
                        s[i].setVisible(true);
                    else
                        s[i].setVisible(false);
                }
                return false;
            }
        }
    }
}

See this JSFiddle demonstration using your initial demo.

Upvotes: 8

Related Questions