Highcharts Sync Tooltip TimeSeries Demo Same datatime

author(s): Torstein Hønsi

by nehamahajan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 800px"></div>
<div id="container1" style="height: 400px; width: 800px"></div>

JavaScript

document.getElementById('container').addEventListener(
  "mousemove",
  syncTooltip
);

document.getElementById('container1').addEventListener(
  "mousemove",
  syncTooltip
);

document.getElementById('container').addEventListener(
  "mouseout",
  mouseOutDetected
);

document.getElementById('container1').addEventListener(
  "mouseout",
  mouseOutDetected
);

function mouseOutDetected() {
  var i, chart;
  for (i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    chart.tooltip.hide();
    _.each(chart.series, series => {
      _.each(series.points, point => {
        point.setState();
      });
    });
  }
}

function syncTooltip(e) {
  var chart,
    point,
    i,
    event;

  for (i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    // Find coordinates within the chart
    event = chart.pointer.normalize(e);
    // Get the hovered point
    const points = _.reduce(chart.series, (points, series, seriesInx) => {
      const point = series.searchPoint(event, true);
      if (point)
        points.push(point);
      return points;
    }, []);

    _.each(chart.series, series => {
      _.each(series.points, point => {
        point.setState();
      });
    });

    _.each(points, point => {
      point.setState('hover'); // show hover marker
    });

    if (!_.isEmpty(points))
      chart.tooltip.refresh(points);

  }
}

Highcharts.chart('container', {
  chart: {
    marginBottom: 80
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false
      }
    }
  },
  xAxis: {
    type: 'datetime',
    minTickInterval: _.noop,
    minRange: 600000
  },

  yAxis: {
    title: {
      text: null
    },
    minRange: 0.00001,
    lineWidth: 1,
    startOnTick: true,
    min: 0
  },
  tooltip: {
    positioner: function(boxWidth, boxHeight, point) {
      return {
        x: point.plotX < (this.chart.plotWidth * 0.75) ? this.chart.plotWidth - boxWidth + 35 : 50,
        y: 5
      };
   ...