Highcharts - fire legendItemClick event

Question

I want to fire the same event that it's fired when you select an item legend but from an external html button. Is it possible?

I've created a jsfiddle to show it: http://jsfiddle.net/YcJF8/1/ .

$('#container').highcharts({
                    chart : {
                        type : 'spline',
                    },

                    xAxis : {
                        categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },

                    series : [{
                        data : [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

                    }],

                    plotOptions : {
                        series : {

                        cursor : 'pointer',
                    }
                },
});

$('#button').click(function() {
        alert("Fire legenditemclick event");
});

In this jsfiddle, I have a button and I want that when I click the button it fires an event or something that chart detects and acts like item legend (series 1) was clicked.

Thank you very much

Mark · Accepted Answer · 2013-07-03T16:55:51.650

9

Just use:

$($('.highcharts-legend-item')[0]).click()

Where the 0 is the index of the series you wish to 'click'.

Update fiddle.

EDITS

highcharts-legend-item is the class of each entry in the legend. I discovered this by inpecting the legend using chrome developer tools.
the $('.highcharts-legend-item') is a jquery selector to return an array of all elements of that class. I select the first one by index and the $() it to convert it into a jquery object
The .click is this: http://api.jquery.com/click/

edited Jul 03 '13 at 16:55

answered Jul 03 '13 at 14:01

Mark

106,305
20
172
230

Thanks, it's perfect. Just out of curiosity, could you explain me where you found the class highcharts-legend-item and the meaning of each element of the line? Thanks a lot! – A.Vila Jul 03 '13 at 15:22
Hi @Mark, this is a great solution... I have further query. I have combo graph [link]http://jsfiddle.net/TV8f4/ I need to apply ledgend click event on both combo and bar charts... any Ideas? – Hemant.Gupta Jan 02 '14 at 04:31
@Hemant.Gupta, your question isn't really related to this answer (how to click a legend item with code). You want to use the `linkedTo` property (http://api.highcharts.com/highcharts#plotOptions.pie.linkedTo). If you need assistance, open a new question. – Mark Jan 02 '14 at 15:00
@Mark I have created a new question please share your expertise there http://stackoverflow.com/questions/20903114/highcharts-combo-graphs-with-common-legend-click – Hemant.Gupta Jan 03 '14 at 12:03
I too used this and it appeared to work fine however it returns "'null' is null or not an object" when used in Ie8, anyone else found this? any ideas for a fix? – Mike Oram Sep 11 '14 at 15:24
@MikeOram, I tried it in IE11 emulating IE8 and it worked ok. I can't debug IE8 proper as I will never let it touch my PC again... – Mark Sep 11 '14 at 17:38
Dont blame you, well I have a real IE8 install and it doesnt work. For some reason IE8 does accept a raw JS event trigger so you can use this: document.querySelector('.highcharts-legend-item:first-child').fireEvent('onclick'); however that doesnt work on newer browsers as it throws an error so some browser detection is required for which one to implement, ill see if I can do a fiddle for this once iv finished it. – Mike Oram Sep 12 '14 at 08:38
Okay i have built a fix for it and updated the fiddle: http://jsfiddle.net/YcJF8/30/ it uses the IE detection function mentioned here: http://stackoverflow.com/questions/10964966/detect-ie-version-in-javascript – Mike Oram Sep 12 '14 at 09:03

score 2 · Answer 2 · answered Apr 02 '15 at 10:03

I think the answer with defining the click on

$('.highcharts-legend-item')[0])

is not the best one. It is very "expensive" since the DOM is probably heavy. My solution is generally based on CSS. You can set the position of highchart legend items right above the custom elements that you want to use and every item should have width&height same as the custom HTML element. Highchart elements should have opacity value 0 so they are not visible. So when you click on your element,in fact, you are clicking on the highchart legend item. If you want to set some CSS for your custom element you should define legendItemClick callback:

plotOptions: {
    series: {
        events: {
            legendItemClick: function() {
                var legenedItemIndex = this.index // index of highchart legend item
                $("your html element:eq(" + legenedItemIndex + ")") //do something with your element
            }
        }
    }
}

Highcharts - fire legendItemClick event

2 Answers2

Linked