How to modify highcharts legend item click event?

Solution 1:

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:

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/