How to modify highcharts legend item click event?

Question

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.

highcharts have a great documentation with jsfiddle examples, i'm sure that u you are looking for is there: http://www.highcharts.com/ref/ — Ricardo Binns, May 15 '12 at 16:38
updated link as above is no longer functional. http://api.highcharts.com/highcharts#plotOptions.column.events.legendItemClick — hubson bropa, Oct 15 '14 at 16:50

score 69 · Accepted Answer · edited Aug 07 '15 at 10:51

69

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.

edited Aug 07 '15 at 10:51

TZHX

5,291
15
47
56

answered May 15 '12 at 16:39

Prasenjit Kumar Nag

13,391
3
45
57

Yes, this it!! Thank you for the accurate answer:) – alexche8 May 15 '12 at 16:48
12

To disable legend actions: `legendItemClick: function (e) {e.preventDefault()}` – yves amsellem Aug 27 '12 at 09:34
anybody know how to change the cursor to default over the legend after you disable the click? – BZink Jun 12 '14 at 14:20
1

found it: legend:itemStyle:{} – BZink Jun 12 '14 at 14:41
1

Seem, that API has changed, if this example doesnt work for you, see Tony's answer below. – Bullman Nov 24 '17 at 11:29

score 12 · Answer 2 · answered Jul 29 '14 at 00:00

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/

How to modify highcharts legend item click event?

2 Answers2

Linked