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 dps = [{x: 1, y: 10}, {x: 2, y: 56}, {x: 3, y: 90}, {x: 4, y: 50}, {x: 5, y: 10},{x: 6, y: 10}, {x: 7, y: 55}, {x: 8, y: 90}, {x: 9, y: 59}, {x: 10, y: 17}];

var chart = new CanvasJS.Chart("chartContainer",{
  title: {
    text: "Live Data"
  },
  axisY: {
    gridThickness: 0
  },
  data: [{
    type: "spline",
    dataPoints: dps
  }]
});

chart.render();


var updateInterval = 700;

var updateChart = function() {
  var updatedDps = [];
  chart.options.data[0].dataPoints = [];

  for( var i = 0; i < dps.length; i++ )
    updatedDps.push({x: dps[i].x, y: dps[i].y + Math.random() *(-1-1)});
  

  chart.options.data[0].dataPoints = updatedDps;
  chart.render();		
};

setInterval(function(){updateChart()}, updateInterval);