JSFiddle - React, Tailwind, and code Playground

by JohnCarranza

HTML

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "House Median Price"
	},
	axisY2: {
		title: "Median List Price",
		prefix: "$",
		suffix: "K"
	},
	toolTip: {
		shared: false
	},
	legend: {
		cursor: "pointer",
		verticalAlign: "top",
		horizontalAlign: "center",
		dockInsidePlotArea: true,
		itemclick: toogleDataSeries
	},
	data: [{
		type:"line",
		name: "1",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "2",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "3",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "4",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "5",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "6",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "7",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "8",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "9",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "10",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "11",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "12",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},
	{
		type:"line",
		name: "13",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	},{
		type:"line",
		name: "14",
		showInLegend: true,
		markerSize: 0,
		dataPoints: []
	}]
});
chart.render();

const pushData = function (dataPoints, limit) {
  var y = 100
  for (var i = 0; i < limit; i += 1) {
    y += Math.round(Math.random() * 10 - 5);
    dataPoints.push({
      x: i,
      y: y
    });
  }
}

pushData(chart.data[0].dataPoints,...