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
The plotOptions is a wrapper object for config objects for each series type. The config objects for each series can also be overridden for each series item as given in the series array. Configuration options for the series are given in three levels. Options for all series in a chart are given in the plotOptions.
To determine that chart is fully loaded you can use load event, because load event is invoked when all elements are drown (API reference https://api.highcharts.com/highcharts/chart.events.load). However when you are using series animation this runs in a timeout, then load event is invoked before animation will finish.
The legend is a box containing a symbol and name for each series item or point item in the chart. Each series (or points in case of pie charts) is represented by a symbol and its name in the legend. It is possible to override the symbol creator function and create custom legend symbols.
If you are a developer who would like to create hosted charts programmatically, then the Highcharts Cloud API might be for you.
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.$('.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.click
is this: http://api.jquery.com/click/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With