JavaScript Multi Series Range Area Charts - 0 | JSFiddle Sample Code

JavaScript Multi Series Range Area Charts - 0 | JSFiddle Sample Code

HTML

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<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/javascript-charts/multi-series-range-area-chart/" target="_blank" title="JavaScript Multi Series Range Area Charts ">https://canvasjs.com/javascript-charts/multi-series-range-area-chart/</a></div>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	exportEnabled: true,
	animationEnabled: true,
	theme: "light2",
	title:{
		text: "Temperature Variation - Ladakh vs Chandigarh"
	},
	axisX: {
		title: "April 2017",
		valueFormatString: "DD MMM"
	},
	axisY: {
		suffix: " °C"
	},     
	toolTip: {
		shared: false
     
	},
	legend: {
		cursor: "pointer",
		horizontalAlign: "right",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "rangeArea",
		showInLegend: true,
		name: "Ladakh",
		markerSize: 0,
		yValueFormatString: "#0.## °C",
		dataPoints: [
			{ x: new Date(2017, 03, 01), y: [05, 21] },
			{ x: new Date(2017, 03, 02), y: [07, 15] },
			{ x: new Date(2017, 03, 03), y: [07, 18] },
			{ x: new Date(2017, 03, 04), y: [09, 16] },
			{ x: new Date(2017, 03, 05), y: [10, 17] },
			{ x: new Date(2017, 03, 06), y: [08, 13] },
			{ x: new Date(2017, 03, 07), y: [06, 10] },
			{ x: new Date(2017, 03, 08), y: [06, 15] },
			{ x: new Date(2017, 03, 09), y: [06, 20] },
			{ x: new Date(2017, 03, 10), y: [05, 21] }
		]
	},
	{
		type: "rangeArea",
		showInLegend: true,
		name: "Chandigarh",
		markerSize: 0,
		yValueFormatString: "#0.## °C",
		dataPoints: [
			{ x: new Date(2017, 03, 01), y: [21, 31] },
			{ x: new Date(2017, 03, 02), y: [15, 30] },
			{ x: new Date(2017, 03, 03), y: [18, 30] },
			{ x: new Date(2017, 03, 04), y: [16, 30] },
			{ x: new Date(2017, 03, 05), y: [17, 33] },
			{ x: new Date(2017, 03, 06), y: [13, 35] },
			{ x: new Date(2017, 03, 07), y: [10, 30] },
			{ x: new Date(2017, 03, 08), y: [15, 31] },
			{ x: new Date(2017, 03, 09), y: [20, 32] },
			{ x: new Date(2017, 03, 10), y: [21, 33] }
		]
	}]
});
chart.render();

function toggleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else {
		e.dataSeries.visible = true;
	}
	e.chart.render();
}

}