When you hover over a point in a Highcharts chart, you get a nice enlarged circle under you cursor (or other symbol). What I would like to do manually trigger that hover effect.
I know that I can manually trigger the mouseOver event on the point, but that doesn't give me the enlarged symbol on the chart that I am going for.
I found the answer by looking at the source - call "setState('hover');" on the point that you want to be highlighted.
Just to add an important information:
For StockChart this solution doesn't work:
In this example you have to replace this:
chart.tooltip.refresh(chart.series[0].data[i]);
to this:
chart.tooltip.refresh([chart.series[0].points[i]]);
One possible solution is available here.
Here is an example of how to select (hover) the last valid point in series programmatically:
// Find last not-null point in data
let last = data.indexOf(null) - 1;
last = (last === -2) ? data.length - 1 : last;
const lastPoint = this.series[0].points[last];
// Trigger the hover event
lastPoint.setState('hover');
lastPoint.state = ''; // You need this to fix hover bug
this.tooltip.refresh(lastPoint); // Show tooltip
Full JSFiddle exapmle
To give a more direct answer (e.g. for then you don't have access to the highcharts instance):
you need to create a mouseover event and give it proper pageX and pageY attributes before you trigger it.
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