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>

JavaScript

var dps = [];  

var chart = new CanvasJS.Chart("chartContainer",{
	title: {
  	text: "Dynamic Chart"
  },
  data: [{
    type: "line",
    markerBorderThickness: 2,
    markerColor: "white",
    dataPoints : dps
  }]
});

chart.render();
var xVal = dps.length + 1;
var yVal = 15;	
var updateInterval = 1000;

var updateChart = function () {      	

  yVal = yVal +  Math.round(5 + Math.random() *(-5-5));

  if(dps.length && yVal < dps[dps.length - 1].y)
  {
    dps.push({x: xVal,y: yVal, markerBorderColor: "red"});
    dps[dps.length - 2].lineColor = "red";
  }
  else if(dps.length)
  {
    dps.push({x: xVal, y: yVal, markerBorderColor: "blue"});
    dps[dps.length - 2].lineColor = "blue";
  }
  else
  dps.push({x: xVal, y: yVal, markerBorderColor: "blue"});
  
  xVal++;
  chart.render();		
};
setInterval(function(){updateChart()}, updateInterval);