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
);

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

  currenntTargetChart = e.currentTarget.id;

  for (i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    // Find coordinates within the chart
    chartParent = $(chart.container).parent().attr('id');
    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;
    }, []);

    if (chartParent !== currenntTargetChart) {
      _.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,
    labels: {
      formatter: function() {
        var midnight = (Highcharts.dateFormat('%l:%M %P', this.value) === '12:00 am');
        if (midnight) {
          return moment(this.value).format('D. MMM');
        } else {
          return moment(this.value).format('LT');
        }
      }
    }
  },

  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
      };
    },
    shape: 'rect',
    useHTML: true,
    shadow: false,
    shared: true
  },
  series:...