JSFiddle - React, Tailwind, and code Playground

by vasagi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<div id="container"></div>
<div id="container1"></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;
    }, []);


    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
      };
    },
    shape: 'rect',
    useHTML: true,
    shadow: false,
    shared: true
  },
  series: [{
      data: [
        [1642103985193, 0.024],
        [1642104885194, 0.0244],
        [1642105785235,...