JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var limit = 1000;
var y1 = 100, y2 = 100, y3 = 100, y4 = 100;    
var dataSeries1 = [], dataSeries2 = [], dataSeries3 = [], dataSeries4 = [];
for (var i = 0; i < limit; i += 1) {
  y1 += Math.round(Math.random() * 10 - 5);
  y2 += Math.round(Math.random() * 10 - 2);
  y3 += Math.round(Math.random() * 10 - 4);
  y4 += Math.round(Math.random() * 10 - 3);
  dataSeries1.push({ x: i, y: y1});
  dataSeries2.push({ x: i, y: y2});
  dataSeries3.push({ x: i, y: y3});
  dataSeries4.push({ x: i, y: y4});
}

var options = {
  zoomEnabled: true,
  animationEnabled: true,
  axisY: {
    includeZero: false,
    lineThickness: 1
  },
  data: [{
    type: "line",
    dataPoints: dataSeries1
  },{
    type: "line",
    dataPoints: dataSeries2
  },{
    type: "line",
    dataPoints: dataSeries3
  },{
    type: "line",
    dataPoints: dataSeries4
  }
] 
};

var chart = new CanvasJS.Chart("chartContainer", options);

console.time("Render Time");
chart.render();
console.timeEnd("Render Time");