How to modify highcharts legend item click event?

JavascriptJqueryHighcharts

Javascript 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/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionalexche8View Question on Stackoverflow
Solution 1 - JavascriptPrasenjit Kumar NagView Answer on Stackoverflow
Solution 2 - JavascriptTonyView Answer on Stackoverflow