Show tooltip of a column chart programmatically in StockChart (highchart)

Question

I've a Highstock chart (Line with markers and shadow) and would like to show a highstock tooltip programmatically, ie when i select, for example, a row on some table (that contains chart data) i would like to show the corresponding highstock tooltip.

Is that possible?

Answer 1

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]]);

The solution is available here .

Answer 2

If what you want is to trigger tooltip on the plot near i ^th data point, then probaly you can use this answer , which suggest to do something like

chart.series[0].data[i].setState('hover');

where chart is the result of your new Highcharts.Chart . ( jsfiddle from the comments to that answer).

I guess that if you want to do it on <tr> click, than your js could finally look like this

var chart = new Highcharts.Chart({ <your options> });
$('#yourTableId tr').click(function(){
   var i = $(this).index(); // `this` points to <tr>, get its index
   chart.series[0].data[i].setState('hover');
});