JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/4.0.2/moment-range.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

function randomDate(date) {
  date.add(1, 'seconds');
  return date.valueOf();
}

function dataPointsGenerator(limit) {
  var date = moment()
  var y = 0;
  var dataPoints = [];
  for (var i = 0; i < limit; i += 1) {
    y += Math.round(5 + Math.random() * (-5 - 5));
    dataPoints.push({
      x: randomDate(date),
      y: y
    });
  }
  return dataPoints;
}

var dataPoints1 = dataPointsGenerator(1000);
var dataPoints2 = dataPointsGenerator(1000);
var dataPoints3 = dataPointsGenerator(1000);
var dataPoints4 = dataPointsGenerator(1000);
var dataPoints5 = dataPointsGenerator(1000);
var dataPoints6 = dataPointsGenerator(1000);
var dataPoints7 = dataPointsGenerator(1000);
var dataPoints8 = dataPointsGenerator(1000);
var dataPoints9 = dataPointsGenerator(1000);
var dataPoints10 = dataPointsGenerator(1000);
var dataPoints11 = dataPointsGenerator(1000);
var dataPoints12 = dataPointsGenerator(1000);
var dataPoints13 = dataPointsGenerator(1000);
var dataPoints14 = dataPointsGenerator(1000);
var dataPoints15 = dataPointsGenerator(1000);
var dataPoints16 = dataPointsGenerator(1000);
var dataPoints17 = dataPointsGenerator(1000);
var dataPoints18 = dataPointsGenerator(1000);
var dataPoints19 = dataPointsGenerator(1000);
var dataPoints20 = dataPointsGenerator(1000);

//window.onload = function () {
var yRange = 100;
var xRange = 10;

const chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "chart"
  },
  zoomEnabled: true,
  rangeChanged: syncHandler,
  axisX: {
    gridThickness: 1,
    margin: 0,
    valueFormatString: "HH:mm",
    gridDashType: "dot",
    labelFontSize: 10,
    intervalType: "minute"
  },
  axisY2: {
    title: "Median List Price",
    prefix: "$",
    suffix: "K"
  },
  toolTip: {
    contentFormatter: function(e){
      var content = "", dataPoint;
      toolTipXValue = e.entries[0].dataPoint.x;
      toolTipYValue = e.entries[0].dataPoint.y;

      for (var i = 0; i < e.chart.data.length; i++) {
        if (e.chart.data[i].dataPoints...