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 color = "";

var updateChart = function () {      	

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

  if(dps.length && yVal < dps[dps.length - 1].y)
  {
  	//Setting markerBorderColor and lineColor for each specific dataPoint 
  	color = (yVal % 2 === 0 ? "red" : "blue");
    dps.push({x: xVal, y: yVal, markerBorderColor: color});
    dps[dps.length - 2].lineColor = color;
  }
  else if(dps.length)
  {
  	//Setting markerBorderColor and lineColor for each specific dataPoint 
  	color = (yVal % 2 === 0 ? "blue" : "red");
    dps.push({x: xVal, y: yVal, markerBorderColor: color});
    dps[dps.length - 2].lineColor = color;
  }
  else
    dps.push({x: xVal, y: yVal, markerBorderColor: "blue"});

  xVal++;
  chart.render();		
}
setInterval(function(){updateChart()}, updateInterval);