JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
	title:{
		text: ""
	},
	axisX:{
		valueFormatString: "MM/DD HH:mm",
		gridThickness: 1,
		labelMaxWidth: 40,
		labelAutoFit: !0,
    interval: 1,
	},
	axisY:{
		title: "水位（TPm）",
		lineColor: "#C24642",
		tickColor: "#C24642",
		includeZero: true,
		minimum:0,
		maximum:20,
		titleFontSize:12,
	},
	axisY2: [{
		title: "10分雨量（mm）",
		lineColor: "#7F6084",
		tickColor: "#7F6084",
		includeZero: true,
		minimum:0,
		maximum:50,
		titleFontSize:12,
	},
	{
		title: "累加雨量（mm）",
		lineColor: "#369EAD",
		tickColor: "#369EAD",
		includeZero: true,
		minimum:0,
		maximum:200,
		titleFontSize:12,
	}],
             
             toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	dataPointMaxWidth: 8,
	data: [{
		type: "line",
		name: "水位",
		color: "#369EAD",
		showInLegend: true,
		markerSize: 7,
		lineColor: "rgba(0,115,230,1)",
		markerBorderColor: "rgba(0,115,230,1)",
		markerBorderThickness: 2,
		markerColor: "rgba(230, 242, 255,1)",
		dataPoints: [
			{ x: new Date(2020, 01, 01), y: 15.5 }, 
			{ x: new Date(2020, 01, 02), y: 15.6 },
			{ x: new Date(2020, 01, 03), y: 16.0 },
			{ x: new Date(2020, 01, 04), y: 15.6 },
			{ x: new Date(2020, 01, 05), y: 15.3 },
			{ x: new Date(2020, 01, 06), y: 15.0 },
			{ x: new Date(2020, 01, 07), y: 14.5 },
			{ x: new Date(2020, 01, 08), y: 14.5 },
			{ x: new Date(2020, 01, 09), y: 14.6 },
			{ x: new Date(2020, 01, 10), y: 14.7 },
			{ x: new Date(2020, 01, 11), y: 14.8 },
			{ x: new Date(2020, 01, 12), y: 15.0 }
		]
	},
	{
		type: "line",
		name: "累加雨量",
		color: "#7F6084",
		axisYType: "secondary",
		axisYIndex: 1,
		showInLegend: true,
		dataPoints: [
			{ x: new Date(2020, 01, 01), y: 05 }, 
			{ x: new Date(2020, 01, 02), y: 11 },
			{ x: new Date(2020, 01, 03), y: 21 },
			{ x: new Date(2020, 01, 04), y: 27 },
			{ x: new Date(2020, 01, 05), y: 32 },
			{...