JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>
<script>
window.onload =  () => {
  const chart = new CanvasJS.Chart("chartContainer", {
        zoomEnabled: true,
        zoomType: "xy",
        title:{
          text: "Zoom Example"              
        },
         data: [              
        {
          type: "line",
          markerSize: 0,
          lineThickness: 2,
          dataPoints: []
        },
        {
        type: "line",
        markerSize: 0,
          lineThickness: 4,
          lineColor: "red",
          dataPoints: []
        }],
  });
  	let limit = 1000;
  	let y = 0;
    let allXCoords = [];
    let allYCoords = [];
    for (var i = 0; i < limit; i += 1) {
        y += (Math.random() * 10 - 5);
        allXCoords.push(i-limit/2);
        allYCoords.push(y);
         chart.options.data[0].dataPoints.push({
          x: i - limit / 2,
          y: y
           });
        }
     	const minX = Math.min.apply(Math, allXCoords);
      const minY = Math.min.apply(Math, allYCoords);
      const maxX = Math.max.apply(Math, allXCoords);
      const maxY = Math.max.apply(Math, allYCoords);
    	chart.options.data[1].dataPoints.push(
      	{x:maxX, y:minY},
        {x:minX, y: minY},
        {x:minX, y: maxY},
        {x: maxX, y: maxY},
        {x: maxX, y: minY},
        {x:minX, y: minY}
      );
      chart.options.axisX.minimum = minX;
      chart.options.axisX.maximum = maxX;
      chart.options.axisY.minimum = minY;
      chart.options.axisY.maximum = maxY;
			chart.render();
  }
</script>