Angular & Highcharts. Set state to hover programatically

1
votes

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?

1
javascriptangularjshighcharts

1 Answers

3
votes

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