JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints1 = [];
var dataPoints2 = [];

var chart = new CanvasJS.Chart("chartContainer", {
	zoomEnabled: true,
	title: {
		text: "Bandwidth"
	},
	axisX: {
		title: "Time",
    valueFormatString: "hh:mm:ss TT",
	},
	axisY:{
		suffix: " Mbps",
		//includeZero: false //When includeZero is set to true, axisY sets the range in such a way that Zero is a part of it.
		minimum: 0
	}, 
	toolTip: {
		shared: true
	},
	legend: {
		cursor:"pointer",
		verticalAlign: "top",
		fontSize: 22,
		fontColor: "dimGrey",
		itemclick : toggleDataSeries
	},
	data: [{ 
		type: "area",
		xValueType: "dateTime",
		yValueFormatString: "####.00 Mbps",
		xValueFormatString: "hh:mm:ss TT",
		showInLegend: true,
		name: "Upload",
		dataPoints: dataPoints1
		},
		{				
			type: "area",
			xValueType: "dateTime",
			yValueFormatString: "####.00 Mbps",
			showInLegend: true,
			name: "Download" ,
			dataPoints: dataPoints2
	}]
});

function toggleDataSeries(e) {
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else {
		e.dataSeries.visible = true;
	}
	chart.render();
}

var updateInterval = 1000;

var time = new Date;

function updateChart(count) {
	count = count || 1;
	var yValue1, yValue2;
	for (var i = 0; i < count; i++) {
		time.setTime(time.getTime()+ updateInterval);
	// pushing the new values
	yValue1=getRandom(0,30) //.toFixed(2) not working. WHY??
	yValue2=getRandom(0,30)
	dataPoints1.push({
		x: time.getTime(),
		y: yValue1
	});
	dataPoints2.push({
		x: time.getTime(),
		y: yValue2
	});
	
	}
	
	// updating legend text with  updated with y Value 
	chart.options.data[0].legendText = "Upload " + yValue1;
	chart.options.data[1].legendText = "Download " + yValue2; 
	chart.render();
}
// generates first set of dataPoints 
updateChart();	
setInterval(function(){updateChart()}, updateInterval);
function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}