JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 1000px;overflow:visible;"></div>
</body>
</html>

JavaScript

var stripLines = [];
var value = 0, interval = 5;

for (var i = 0; i <= 5; i++) {
    stripLines.push({ value: value, color: "black",showOnTop: true});
		value = value + interval;    
}
stripLines.push({value:16,thickness:3,showOnTop: true,color:"rgba(234,234,0,1)",labelAlign: "center",label:"Alert Level 1"});
stripLines.push({value:18,thickness:3,showOnTop: true,color:"rgba(234,234,0,1)",labelAlign: "center",label:"Alert Level 2"});
stripLines.push({value:20,thickness:3,showOnTop: true,color:"rgba(234,234,0,1)",labelAlign: "center",label:"Alert Level 3"});
stripLines.push({value:22,thickness:3,showOnTop: true,color:"rgba(234,234,0,1)",labelAlign: "center",label:"Alert Level 4"});

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	animationDuration: 500,
	title: {
		text: ""
	},
	legend: {
		verticalAlign: "top",
		horizontalAlign: "right",
		dockInsidePlotArea: true
	},
	toolTip: {
		shared: false,
		enabled: true
	},
	data: [
		{name: "Water Head",
		showInLegend: false,
		legendMarkerType: "square",
		type: "area",
		color: "rgba(119,187,255,1)",
		markerSize: 0,
		dataPoints: [
			{ x: new Date(2017, 1, 5), y: 12 },
			{ x: new Date(2017, 1, 6), y: 12 }
		]
		},
        	{name: "",
		 showInLegend: false,
		 legendMarkerType: "none",
		 type: "area",
		 color: "rgba(176,88,0,1)",
		 markerSize: 0,
		 fillOpacity: 1,
		 toolTipContent: "River Shape",
		 dataPoints: [
			{ x: new Date(2017, 1, 5,0,0,0), y: 22 },
			{ x: new Date(2017, 1, 5,3,0,0), y: 22 },
				{ x: new Date(2017, 1, 5,6,0,0), y: 5 },
				{ x: new Date(2017, 1, 5,18,0,0), y: 5 },
				{ x: new Date(2017, 1, 5,21,0,0), y: 22 },
				{ x: new Date(2017, 1, 6,0,0,0),y:22 },
		 ]
		},
     {name: "Water Level",
		 showInLegend: false,
		 legendMarkerType: "none",
		 type: "line",
		 color: "rgba(0,0,255,1)",
		 markerSize: 5,
		 fillOpacity: 1,
		 dataPoints: [
			{ x: new Date(2017, 1, 5,0,0,0), y: 4 },
			{ x: new Date(2017, 1, 5,1,0,0), y: 4.5 },
			{ x: new Date(2017, 1,...