JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
<button id="changeDPS">
  Update DPS
</button>

JavaScript

window.onload = function () {

  var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: true, 
    title:{
      text: "Try zooming and then updating the dataPoints" 
    },
    axisY:{
      includeZero: false
    },
    data: data,  // random generator below

  });

  chart.render();
  document.getElementById("changeDPS").addEventListener("click", function() {
    chart.options.data[0].dataPoints = dps2;
    chart.render();
  })
}

var limit = 1000;    //increase number of dataPoints by increasing this

var y = 0;
var data = []; var dataSeries = { type: "line" };
var dps1 = [], dps2 = [];
for (var i = 0; i < limit; i += 1) {
  y += (Math.random() * 10 - 5);
  dps1.push({
    x: i - limit / 2,
    y: y                
  });
  dps2.push({
    x: i - limit / 2,
    y: (Math.random() * 10 - 5)               
  });
}

dataSeries.dataPoints = dps1;
data.push(dataSeries);