I am using basic column chart from highchart component, and one feature that I need to implement is draw a popup (using popover) with information related with the selected series and selected category. In the code below you can see that I am attaching popover component to every column:
load: function(e) {
$(".highcharts-tracker rect").hover(function() {
$(this).attr('data-content',
'here should be a nice call to my web api method');
}).popover({trigger:'hover', placement:'right'}).hover(function() {
As you see above, what I have done is the creation of the popup using popover component. My question now is related with get the series name and the category for the selected series in order to call to my web API method. If you see image below, for the selected column I need to get the values (serie1, 2016).
Any ideas? JSFiddle: Column chart
You can hook into the point events to detect when the mouse is over a series. At that point, you have access to the series name etc.
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$(".popover").text(
this.series.name);
}
}
}
}
},