Show tooltip of a column chart programmatically in

Question

I've a Highstock chart (Line with markers and shadow) and would like to show a highstock tooltip programmatically, i.e. 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');
});