How to modify highcharts legend item click event?
JavascriptJqueryHighchartsJavascript Problem Overview
I need to modify click event on highcharts legend items. Highcharts demo http://www.highcharts.com/demo/line-basic . I want for example: first action will be some alert and second action will be action by default(clean Tokyo line from chart). Thanks. Sorry if question not clean.
Javascript Solutions
Solution 1 - Javascript
You have to use the legendItemClick
callback like the following code
plotOptions: {
line: {
events: {
legendItemClick: function () {
alert('I am an alert');
//return false;
// <== returning false will cancel the default action
}
}
,
showInLegend: true
}
}
Here is working fiddle which shows alert when you click on legends like on Tokyo and then hide Tokyo line.
See also the plotOptions documentation for the event in question. Where you need to place this may differ depending on what chart type you are using.
Solution 2 - Javascript
For me, the legendItemClick event had to be for the series, not the line. E.g.:
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;
}
}
}
}
},
Example from Highcharts: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-events-legenditemclick/