JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<body>
  <div id="chartContainer" style="height: 400px; width: 100%;">
  </div>
</body>

JavaScript

var dps = []; // dataPoints 
 
var chart = new CanvasJS.Chart("chartContainer",
{	     	    
         axisX:
         {
            title: "Time",
            labelFontFamily:"arial",
            labelFontSize:12,           
            labelFontColor:"black",
            lineThickness: 1,
            tickColor: "black", 
            tickThickness: 1,              
            interval:12, 
             //minimum:0, 
             //maximum:65,
         },
         axisY: 
         {						
      		title: "value",           
            minimum:0,
            maximum:3500,
           },
           
      	zoomEnabled: true,
	     data: 
		 [
		 {
	        type: "line",
	        markerType: "none",                      
                   dataPoints:dps,                                        
		 }
		 ]
	   });
       var xVal = 0;
	   var yVal = 0;	
	   var updateInterval = 1000;
	   var dataLength = 60; // number of dataPoints visible at any point

	   var updateChart = function (count) 
	   {
	      count = count || 1;
	      		  
	      // count is number of times loop runs to generate random dataPoints.
	      var Concentration = 1500;
          var  Time_Value = "08:08:20 AM";	        
	      for (var j = 0; j < count; j++) 
		  {	
		     yVal = Concentration;
			 dps.push(
			 {
                x: xVal,
				y: yVal,
                label:Time_Value, 
			 });
			  xVal++;
		   };
			
		   if (dps.length > dataLength)
		   {
		      dps.shift();				
		   }
			
		   chart.render();		  
		};
		// update chart after specified time. 
		   setInterval(function(){updateChart()}, updateInterval);