JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>
<div id="chartContainer3" style="height: 360px; width: 100%;"></div>
<div id="chartContainer4" style="height: 360px; width: 100%;"></div>

JavaScript

var limit = 1000;
var y = 100;    
var dataSeries1 = [];
for (var i = 0; i < limit; i += 1) {
	y += Math.round(Math.random() * 10 - 5);
	dataSeries1.push({x: i, y: y});
}

var options = {
	zoomEnabled: true,
	animationEnabled: true,
  data: [{
    type: "line",
    dataPoints: dataSeries1
  }]  
};

var chart1 = new CanvasJS.Chart("chartContainer1", options);
var chart2 = new CanvasJS.Chart("chartContainer2", options);
var chart3 = new CanvasJS.Chart("chartContainer3", options);
var chart4 = new CanvasJS.Chart("chartContainer4", options);

console.time("Render Time");
chart1.render();
chart2.render();
chart3.render();
chart4.render();
console.timeEnd("Render Time");