JSFiddle - React, Tailwind, and code Playground

by starbuck2511

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

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

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
	title:{
		text: "Weekly Revenue Analysis for First Quarter"
	},
	axisY:[{
		title: "Order",
		lineColor: "#C24642",
		tickColor: "#C24642",
		labelFontColor: "#C24642",
		titleFontColor: "#C24642",
		suffix: "k"
	},
	{
		title: "Footfall",
		lineColor: "#369EAD",
		tickColor: "#369EAD",
		labelFontColor: "#369EAD",
		titleFontColor: "#369EAD",
		suffix: "k"
	}],
	axisY2: {
		title: "Revenue",
		lineColor: "#7F6084",
		tickColor: "#7F6084",
		labelFontColor: "#7F6084",
		titleFontColor: "#7F6084",
		prefix: "$",
		suffix: "k"
	},
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "line",
		name: "Footfall",
		color: "#369EAD",
		showInLegend: true,
		axisYIndex: 1,
		dataPoints: [
			{ x: new Date(2017, 0, 7), y: 0.04582802370219992 }, 
			{ x: new Date(2017, 0, 14), y: 4.128639986274267 },
			{ x: new Date(2017, 0, 21), y: 5.608386156365495 },
			{ x: new Date(2017, 0, 28), y: 5.595402441413827 },
			{ x: new Date(2017, 1, 4), y: 6.481094221697065 },
			{ x: new Date(2017, 1, 11), y: 2.8922340069886086 },
			//{ x: new Date(2017, 1, 18), y: null },
			{ x: new Date(2017, 1, 25), y: 1.9633148123801192 },
			{ x: new Date(2017, 2, 4), y: 5.360713023476582 }
		]
	},
	{
		type: "line",
		name: "Revenue",
		color: "#7F6084",
		axisYType: "secondary",
		showInLegend: true,
		dataPoints: [
			{ x: new Date(2017, 0, 7), y: 0.09623884977462001 }, 
			{ x: new Date(2017, 0, 14), y: 8.670143971175952 },
			{ x: new Date(2017, 0, 21), y: 11.777610928367686 },
			{ x: new Date(2017, 0, 28), y: 11.750345126969004 },
			{ x: new Date(2017, 1, 4), y: 13.610297865563764 },
			{ x: new Date(2017, 1, 11), y: 6.073691414676082 },
			//{ x: new Date(2017, 1, 18), y: null },
			{ x: new Date(2017, 1, 25), y: 4.122961105998274 },
			{ x: new Date(2017, 2, 4), y: 11.257497349300825 }			
		]
	}]
});
chart.render();

function...