JSFiddle - React, Tailwind, and code Playground

by raya teng

HTML

<div id="chartContainer" style="height: 380px; width:580px;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

var dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
title :{
		text: "Dynamic Data"
	},
axisY: {
				includeZero: false,
        gridThickness: 0,
    	  suffix: "x",
        minimum:1,
      	maximum:2,
        interval:0.2
	},   
axisX: {
      //minimum:0,
      //maximum:3,
      //interval:1,
    },
data: [{
		type: "line",
		markerType: "none",
		lineThickness: 5,
		color: "black",
    xValueType: "dateTime",
		dataPoints: dps
	}]
});

var xVal = 0;
var yVal = 0; 
var ms = 0;
var time = new Date();
var t = time.getMilliseconds();
var updateInterval = 100;
var dataLength = 1;
var updateChart = function (count) {

	count = count || 1;

	for (var j = 0; j < count; j++) {
			yVal = Math.floor(100 * Math.pow(Math.E, 0.00006 * ms)) / 100;
      dps.push({
        x: xVal,
        y: yVal
      });
    	xVal = t;
   	 	ms=ms+100;
	}

  chart.render();
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);