1

I have a chart with 50 points and a table below with 50 columns. The 50 column table holds detailed information of the same data that is coming from the chart.

When you mouseover the series point, the plotOptions are setup to fire a hover function that gets the index of the point and highlights the index of the table row below, showing that the data is the same. On the other hand, when the table column is highlighted, that period's tooltip changes to a hover state. Using jQuery, I did it this way:

//Inside of a jquery mouseover event.
chart.series[0].data[pointIndexNum].setState('hover');

My problem is I can't do setState('hover') anywhere in my controller for highcharts-ng. So my question becomes... How can I programatically make the tooltip change hover states with Angular?

sdawson26
  • 139
  • 4
  • 15

1 Answers1

4

How can I programatically make the tooltip change hover states with Angular?

Use the Highcharts object directly. For instance:

var chart = Highcharts.charts[0];
chart.series[0].data[pointIndexNum].setState('hover');

Use a constant service to wrap this, then add it to the module rather than a controller.

function foo(){
  var chart = Highcharts.charts[0];
  chart.series[0].data[pointIndexNum].setState('hover');
}

angular.module('myApp').constant('HighchartsHoverProgramatically', foo);

References

Community
  • 1
  • 1
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
  • Property 'setState' does not exist on type 'number | PointOptionsObject | [string, number]'. This error comes when I am calling setState() method – Salman Khan Dec 14 '22 at 07:39