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="chartContainer1" style="height: 280px; width: 100%;"></div>
<div id="chartContainer2" style="height: 280px; width: 100%;"></div>

JavaScript

var dps1 = [], dps2 = [];
var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Dynamic Chart 1"
  },
  axisY: {
  	includeZero: false
  },
  data: [
    {
      type: "spline",
      dataPoints: dps1
    }					
  ]
});
chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: "Dynamic Chart 2"
  },
  axisY: {
  	includeZero: false
  },
  data: [
    {
      type: "spline",
      dataPoints: dps2
    }					
  ]
});
chart2.render();

var xVal1 = dps1.length + 1;
var yVal1 = 150;	
var updateInterval1 = 1000;
var updateChart1 = function () {

  yVal1 = yVal1 +  Math.round(5 + Math.random() *(-5-5));
  dps1.push({x: xVal1,y: yVal1});
  xVal1++;
  if (dps1.length >  10 )
  {
    dps1.shift();				
  }
  chart1.render();
};

var xVal2 = dps2.length + 1;
var yVal2 = 4000;	
var updateInterval2 = 500;
var updateChart2 = function () {

  yVal2 = yVal2 +  Math.round(5 + Math.random() *(-5-5));
  dps2.push({x: xVal2, y: yVal2});
  xVal2++;
  if (dps2.length >  10 )
  {
    dps2.shift();				
  }
  chart2.render();
};

setInterval(function(){updateChart1()}, updateInterval1); 
setInterval(function(){updateChart2()}, updateInterval2);