CODEWITHSUNDEEP
javascripthighcharts
Aqqqq
Aqqqq

Reputation: 848

How to show individual tooltips after loading a chart?

I would like the highchart to behave in this way: Immediately after loading the chart, no tooltips is shown. When a button is clicked for the first time, the tooltip of the first data point is shown; when the button is clicked for the second time, the tooltip of the first data point disappears and the tooltip of the second data point is shown, etc. The tooltip needs to be shown without having a mouse hovering over the data point. The graph should not be interactive throughout the process.

After clicking the button after the last data point is shown, all tooltips are enabled.

I have tried to use, among others, tooltip.refresh(point) and hide(), without success.

Upvotes: 0

Views: 547

Answers (1)

morganfree
morganfree

Reputation: 12472

Disable mouse tracking for the series and use tooltip.refresh(point) and tooltip.hide

var i = -1;

$('#show-tt').on('click', function() {
   var points = chart.series[0].points;
   chart.tooltip.hide();
   chart.tooltip.refresh(points[++i % points.length]);
});


var chart = Highcharts.chart('container', {
  series: [{
    enableMouseTracking: false,
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }]
});

example: http://jsfiddle.net/sfty1xd7/

Upvotes: 1

Related Questions