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: 300px; width: 400px;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: "black",showOnTop: true,lineDashType: "shortDot"});
	value = value + interval;    
}
stripLines.push({value:25,showOnTop: true,color:"black"});*/
// 管理値
stripLines.push({value:16,thickness:3,showOnTop: true,color:"rgba(234,234,0,1)",labelAlign: "far",label:"Alert Level 1",labelFontColor:"rgba(0,0,0,0.3)"});
stripLines.push({value:18,thickness:3,showOnTop: true,color:"rgba(255,128,128,1)",labelAlign: "far",label:"Alert Level 2",labelFontColor:"rgba(0,0,0,0.3)"});
stripLines.push({value:20,thickness:3,showOnTop: true,color:"rgba(255,0,0,1)",labelAlign: "far",label:"Alert Level 3",labelFontColor:"rgba(0,0,0,0.3)"});
stripLines.push({value:22,thickness:3,showOnTop: true,color:"rgba(255,0,255,1)",labelAlign: "far",label:"Alert Level 4",labelFontColor:"rgba(0,0,0,0.3)"});
// 縦線
var firstDate = new Date(2017,1,5,0);
var hourset = firstDate.getHours();
var valueY = new Date(2017,1,5,0);
stripLinesY.push({value: valueY,showOnTop: true,color:"black"});
for (var i = 1; i <= 23; i++) {
	valueY = firstDate.setHours(hourset + i);
	stripLinesY.push({ value: valueY, color: "black",showOnTop: true,lineDashType: "shortDot"});
}
stripLinesY.push({value: new Date(2017, 1, 5, 23, 29),showOnTop: true,color:"black"});

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	animationDuration: 500,
	zoomEnabled: false,
	toolTip: {
		shared: false,
		enabled: true,
		cornerRadius: 5
	},
	axisX: {
		valueFormatString: "",
		minimum: 0,
		maximum: 10,
		interval: 10,
		labelFontSize: 0,
		tickThickness: 0,
    lineThickness:1,
	},
	axisY: {
		title: "",
		titleFontSize: 18,
		minimum: 0,
		maximum: 25,
		interval: 5,
		gridThickness: 1,
		stripLines: stripLines,
		includeZero: true,
		gridDashType:"shortDot",
    		labelFormatter: function(e){
	          return " " + e.value;
    		},
		titleFontFamily:...