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>
<select id="colors">
  <option value="blue" selected>Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>

</select>

JavaScript

window.onload = function () {

      var dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}];   //dataPoints. 
      var color = "blue";

      var chart = new CanvasJS.Chart("chartContainer",{
      	title :{
      		text: "Changing line color on Live Data"
      	},
      	axisX: {						
      		title: "Axis X Title"
      	},
      	axisY: {						
      		title: "Units"
      	},
      	data: [{
      		type: "line",
          lineColor: "blue",
          markerColor: "blue",
      		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));
      	dps.push({x: xVal,y: yVal, lineColor: color, markerColor: color});
      	
      	xVal++;
      	/* if (dps.length >  10 )
      	{
      	  dps.shift();				
      	} */

      	chart.render();		
        setTimeout(function(){updateChart()}, updateInterval); 

	// update chart after specified time. 

};

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


colors.addEventListener("change", function(e) {
	color = e.target.value;
})
}