JSFiddle - React, Tailwind, and code Playground

by btcwin365

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;">
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
			title:{
	    verticalAlign: "top",
			},
			toolTip:{
	        	enabled: true,
			content: "{y}"
			},
			axisX: {
			title: "",
			crosshair:{
					enabled: true,
					snapToDataPoint: true,
					valueFormatString:"DD/MM HH:mm"
				   },        
			interval: 1,
			intervalType: "day",
	        	valueFormatString:"DD/MM"
			},
	    axisY:{
			includeZero: false,
			valueFormatString: "#######0.00##$"
	      		},
      data: [
      {
      type: "area",
			markerSize: 0,
			xValueType:"dateTime",
			xValueFormatString:"DD/MM/YY HH:mm",
			yValueFormatString:"######0.00##$",
	    dataPoints: [ 
              { x: 1539216000000, y : 44 },
              { x: 1539388800000, y : 84 },
              { x: 1539561600000, y : 4  },
              { x: 1539734400000, y : 44 },
              { x: 1539820800000, y : 11 }
                  ]
      	      	}
              ]
   	  });

chart.render();

update1(chart);

function update1(chart){
var now = new Date();
var price = 15 * 1.10;
chart.options.data[0].dataPoints.push({x: now, y: price});
chart.render();
}

setInterval(function(){update2(chart)}, 5000);

function update2(chart){
var length = chart.options.data[0].dataPoints.length;
var now = new Date();
var price = 12 + Math.round(5 + Math.random() *(-5-5));
chart.options.data[0].dataPoints[length-1].y = price;
chart.render();
}