Highcharts - fire legendItemClick event

A.Vila picture A.Vila · Jul 3, 2013 · Viewed 8.1k times · Source

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

Answer

Mark picture Mark · Jul 3, 2013

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/