JSFiddle - React, Tailwind, and code Playground

by totszwai

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<div id="container1"></div>

JavaScript

function adjustCharts(charts) {
  if (charts && charts.length) {
    // use the first chart as the primary to determine the extremes of the xAxis
    const extremes = charts[0].xAxis[0].getExtremes();
    const last = charts.length - 1;
    charts.forEach((chart, position) => {
      ['mousemove', 'touchmove', 'touchstart'].forEach((eventType) => {
        chart.container.addEventListener(eventType, function handler(e) {
          //syncCrosshairs(e, chart, charts);
        });
      });

      // hide the title with Highcharts
      chart.title.update({
        text: null
      });

      // hide the xAxis on the chart and update extremes
      if (position !== last) {
        chart.xAxis[0].update({
          visible: false,
          crosshair: {
            snap: false
          },
          min: extremes.min,
          max: extremes.max
        });
      }

      // we must clear the reset function here, otherwise it will keeps clearing
      // the crosshair.
      chart.pointer.reset = function () {
        return undefined;
      };
    });
  }
}

// ghetto hack begin
const charts = [];
setTimeout(() => {
  // normally this would be done via useEffect in another component
  // with provider passing all the loaded charts within the provider
  adjustCharts(charts);
}, 2000);
// ghetto hack end

Highcharts.chart('container', {
	chart: {
    height: 100,
    events: {
      load: function () {
				charts.push(this);
      }
    }
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  series: [{
    data: [1, 2, 3, 4]
  }]
});

Highcharts.chart('container1', {
	chart: {
  	height: 100,
    events: {
      load: function () {
				charts.push(this);
      }
    }
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  series: [{
    data: [-11, -20, -13, -24]
  }]
});