Tester Tester - 1 month ago 35
Javascript Question

Highcharts Synchronized charts display tooltip

I want to display tooltip in Synchronized charts. Please see this Jsfiddle

$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;

for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point

if (point) {
point.onMouseOver(); // Show the hover marker
chart.tooltip.refresh(point); // Show the tooltip
chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
}
}
});


The tooltip can only display the first series but no second series, even mouse hover the second series.

enter image description here

Please advice.

Answer

First you have to set the tooltip-Option shared to true. Then you have to update the mousemove touchmove touchstart-Eventhandler to deal with multiple series/points

$('#container').bind('mousemove touchmove touchstart', function(e) {
      var chart,
      points,
      i,
      secSeriesIndex = 1;

      for (i = 0; i < Highcharts.charts.length; i++) {
          chart = Highcharts.charts[i];
          e = chart.pointer.normalize(e); // Find coordinates within the chart
          points = [chart.series[0].searchPoint(e, true), chart.series[1].searchPoint(e, true)]; // Get the hovered point

          if (points[0] && points[1]) {
              if (!points[0].series.visible) {
                  points.shift();
                  secSeriesIndex = 0;
              }
              if (!points[secSeriesIndex].series.visible) {
                  points.splice(secSeriesIndex,1);
              }
              if (points.length) {
                  chart.tooltip.refresh(points); // Show the tooltip
                  chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
              }
          }
      }
});

See http://jsfiddle.net/doc_snyder/51zdn0jz/6/ for your updated fiddle. I have graciously taken the code linked in this Post http://forum.highcharts.com/highcharts-usage/synchronize-chart-with-shared-tooltip-t33919/.

Comments