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 stripLinesY = [];
var value = 0, interval = 5;
for (var i = 0; i <= 5; i++) {
    stripLines.push({ value: value, color: "darkgray",showOnTop: true});
		value = value + interval;    
}
var firstDate = new Date(2017,1,5);
var hourset = firstDate.getHours();
for (var i = 0; i <= 23; i++) {
    stripLinesY.push({ value: value, color: "gray",showOnTop: true});
		value = firstDate.setDate(hourset + 1);
}

stripLines.push({value:16,thickness:3,showOnTop: true,color:"rgba(234,234,0,1)",labelAlign: "far",label:"Alert Level 1"});
stripLines.push({value:18,thickness:3,showOnTop: true,color:"rgba(255,128,128,1)",labelAlign: "far",label:"Alert Level 2"});
stripLines.push({value:20,thickness:3,showOnTop: true,color:"rgba(255,0,0,1)",labelAlign: "far",label:"Alert Level 3"});
stripLines.push({value:22,thickness:3,showOnTop: true,color:"rgba(255,0,255,1)",labelAlign: "far",label:"Alert Level 4"});

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	animationDuration: 500,
  zoomEnabled: true,
	zoomType: "xy",
	title: {
		text: ""
	},
	legend: {
		verticalAlign: "top",
		horizontalAlign: "right",
		dockInsidePlotArea: true
	},
	toolTip: {
		shared: false,
		enabled: true
	},
	axisX: {
		valueFormatString: "HH:mm",
		minimum: new Date(2017, 1, 5, 0),
		maximum: new Date(2017, 1, 6, 0),
		gridThickness: 1,
    labelAngle: 0,
	  interval: 1,
	  intervalType: "hour",
		labelAutoFit: true,
    stripLines: stripLinesY,
	},
	axisY: {
		title: "Water Level (m)",
		minimum: 0,
		maximum: 25,
		gridThickness: 1,
		stripLines: stripLines,
		includeZero: false,
  },
	axisY2: {
		title: "",
		minimum: 0,
		maximum: 25,
    gridThickness: 0,
    tickLength: 0,    
    lineThickness: 0,
    tickThickness: 0,
		includeZero: false,
    margin: 15,
    labelFormatter: function(){
          return " ";
    },
	},	
  data: [
		{name: "Water Head",
		showInLegend: false,
		legendMarkerType: "square",
		type: "area",
		color:...