JSFiddle - React, Tailwind, and code Playground

by JohnCarranza

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