Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts - manually trigger hover event on a point

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.

like image 398
Scott At Rain Avatar asked Jun 25 '12 17:06

Scott At Rain


4 Answers

I found the answer by looking at the source - call "setState('hover');" on the point that you want to be highlighted.

like image 56
Scott At Rain Avatar answered Oct 20 '22 18:10

Scott At Rain


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.

like image 45
JMarques Avatar answered Oct 20 '22 19:10

JMarques


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

enter image description here

like image 4
Do Async Avatar answered Oct 20 '22 19:10

Do Async


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.

like image 1
br4nnigan Avatar answered Oct 20 '22 18:10

br4nnigan