Highcharts synchronize tooltip on multiple charts with multiple series

Question

I am trying to synchronize shared tooltip across multiple charts, each having multiple series.

The problem is in the below example, the tooltip always shows the 3 series, even though at that particular point there are only two series present.

1) How do I make sure that a series is shown in tooltip only when it is actually present?

2) How do I make sure the tooltip is closed when we move out of the chart?

JSFiddle: https://jsfiddle.net/qoL7fx27/1/

Code for synchronization in fiddle:

$('#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];
        var points = [];
        // Find coordinates within the chart
        event = chart.pointer.normalize(e.originalEvent);
        // Get the hovered point
        for(var j=0; j<chart.series.length; j++) {
           point = chart.series[j].searchPoint(event, true);
           points.push(point);  
        }

        chart.tooltip.refresh(points);

    }
});

Answer 1

Here is my solution. It's perfectly working for me. I made adjustments based on Synchronisation of multiple charts

Demo here

The following code shows/hides the tooltip and makes sure they are aligned on mousemove and mouseleave.

Note that I found that I only need to find the first point searched and use it to show/hide the tooltip. It's because all my time series share the same x values.

$("#container").bind("mousemove mouseleave", function(e) {
  for (let i = 0; i < Highcharts.charts.length; ++i) {
    let hart = Highcharts.charts[i];
    let event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    let point;
    for (let j = 0; j < chart.series.length && !point; ++j) {
      point = chart.series[j].searchPoint(event, true);
    }
    if (!point) return;

    if (e.type === "mousemove") {
       point.onMouseOver();
      chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
    } else {
      point.onMouseOut();
      chart.tooltip.hide(point);
      chart.xAxis[0].hideCrosshair();
    }

  }
});

Keep reseting the reset function so as to disallow HighCharts resetting the points -- we take over the control.

Highcharts.Pointer.prototype.reset = function() {
  return undefined;
};