HTML5 Range Area Charts - 0 | JSFiddle Sample Code

HTML5 Range Area Charts - 0 | JSFiddle Sample Code

by katsukino

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/chart-types/html5-range-area-chart/" target="_blank" title="HTML5 Range Area Charts ">https://canvasjs.com/docs/charts/chart-types/html5-range-area-chart/</a></div>

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title: {
			text: "Basic Range Area Chart"
		},
		axisY: {
			includeZero: false,
      maximum:0,
      minimum:-120,
      interval:20,
      //stripLines:[{value:-72.9,label:"-72.9",labelAlign:"center",thickness:0}],
		},
		axisX: {
			interval: 10
		},
		data: [
		{
			type: "rangeArea",
			dataPoints: [ 
				{ x: 10, y: [-520, -40.76] }, // y: [Low, High]
				{ x: 20, y: [-520, -78.26] },
				{ x: 35, y: [-520, -72.90],indexLabel:"{y[1]}"},
				{ x: 40, y: [-520, -99.65] },
				{ x: 50, y: [-520, -51.26] }
			]
			}
		]
	});
	chart.render();
}