JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		zoomEnabled:true,
    zoomType:"xy",
    title:
		{
			text: "Setting Dash Type for Grid Lines"
		},
		axisX: {
    	/* lineDashType:"dot", */
    },
    axisY: {		       
			gridDashType: "dash",
      stripLines: [{
        color: "#666"
      }]
		},
    rangeChanged: function(e) {
    	if(e.trigger ==="reset")
      	e.chart.axisY[0].stripLines[0].set("value", e.chart.axisY[0].maximum);
      else
      	e.chart.axisY[0].stripLines[0].set("value", e.axisY[0].viewportMaximum)
    },
		data: [
		{
			type: "line",
			dataPoints: [
				{ x: 10, y: 4 },
				{ x: 20, y: 3 },
				{ x: 30, y: 6 },
				{ x: 40, y: 11 },
				{ x: 50, y: 21 },
				{ x: 60, y: 9 },
				{ x: 70, y: 3 },
				{ x: 80, y: 4 },
				{ x: 90, y: 7 }
			]
		}
		]      
	});
	chart.render();
 chart.axisY[0].stripLines[0].set("value", chart.axisY[0].maximum)
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>