JavaScript Range Area Charts & Graphs

Download JavaScript Chart Samples

JavaScript Range Area Charts are plotted by shading the area between a range of values (LOW, HIGH) & enveloping it with straight line segments. Range charts are generally used to show variations (low & high) in a given time range like temperature, price etc. Range Area Charts are interactive and support animation, zooming, panning & exporting as image. Given example shows JavaScript Range Area Chart along with source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "Temperature in Toronto - July 2017"
	},
	axisY: {
		title: "Temperature (°C)",
		suffix: " °C"
	},
	axisX: {
		valueFormatString: "DD MMMM"
	},
	data: [
	{
		type: "rangeArea",
		xValueFormatString: "DD MMMM", 
		yValueFormatString: "#0.## °C",
		toolTipContent: " <span style=\"color:#4F81BC\">{x}</span><br><b>Min:</b> {y[0]}<br><b>Max:</b> {y[1]}",
		dataPoints: [
			{ x: new Date(2017,06,01), y:[15, 21] },
			{ x: new Date(2017,06,02), y:[13, 27] },
			{ x: new Date(2017,06,03), y:[14, 23] },
			{ x: new Date(2017,06,04), y:[17, 25] },
			{ x: new Date(2017,06,05), y:[16, 23] },
			{ x: new Date(2017,06,06), y:[16, 29] },
			{ x: new Date(2017,06,07), y:[18, 27] },
			{ x: new Date(2017,06,08), y:[16, 25] },
			{ x: new Date(2017,06,09), y:[15, 25] },
			{ x: new Date(2017,06,10), y:[16, 23] },
			{ x: new Date(2017,06,11), y:[15, 26] },
			{ x: new Date(2017,06,12), y:[19, 23] },
			{ x: new Date(2017,06,13), y:[16, 19] },
			{ x: new Date(2017,06,14), y:[16, 27] },
			{ x: new Date(2017,06,15), y:[18, 27] },
			{ x: new Date(2017,06,16), y:[17, 24] },
			{ x: new Date(2017,06,17), y:[19, 23] },
			{ x: new Date(2017,06,18), y:[19, 26] },
			{ x: new Date(2017,06,19), y:[20, 30] },
			{ x: new Date(2017,06,20), y:[17, 21] },
			{ x: new Date(2017,06,21), y:[19, 30] },
			{ x: new Date(2017,06,22), y:[21, 23] },
			{ x: new Date(2017,06,23), y:[20, 24] },
			{ x: new Date(2017,06,24), y:[17, 22] },
			{ x: new Date(2017,06,25), y:[17, 22] },
			{ x: new Date(2017,06,26), y:[16, 22] },
			{ x: new Date(2017,06,27), y:[19, 26] },
			{ x: new Date(2017,06,28), y:[18, 23] },
			{ x: new Date(2017,06,29), y:[18, 27] },
			{ x: new Date(2017,06,30), y:[20, 31] },
			{ x: new Date(2017,06,31), y:[19, 27] }
		]
	}]
});
chart.render();

}

Chart Customizations

You can change the opacity of filled-area using fillOpacity property. Some other customizations include color, markerSize, markerType, markerColor, markerBorderColor.