JavaScript Range Spline Area Charts & Graphs

Download JavaScript Chart Samples

Range Spline Area Chart is same as the Range Area Chart except that it uses smooth curves. It is used to show variations in the given range and is also preferred because they are aesthetically pleasing when compared to normal Range Area Charts. 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", {
	exportEnabled: true,
	animationEnabled: true,
	title:{
		text: "Monthly Average Temperature Variation in New Delhi"
	},		
	axisX: {
		valueFormatString: "MMMM"
	},
	axisY: { 
		title: "Temperature (°C)",
		suffix: " °C"
	},
	data: [{
		type: "rangeSplineArea",
		indexLabel: "{y[#index]}°",
		xValueFormatString: "MMMM YYYY",
		toolTipContent: "{x} </br> <strong>Temperature: </strong> </br> Min: {y[0]} °C, Max: {y[1]} °C",
		dataPoints: [
			{ x: new Date(2016, 00, 01), y: [7, 18] },
			{ x: new Date(2016, 01, 01), y: [11, 23] },
			{ x: new Date(2016, 02, 01), y: [15, 28] },
			{ x: new Date(2016, 03, 01), y: [22, 36] },
			{ x: new Date(2016, 04, 01), y: [26, 39] },
			{ x: new Date(2016, 05, 01), y: [27, 37] },
			{ x: new Date(2016, 06, 01), y: [27, 34] },
			{ x: new Date(2016, 07, 01), y: [26, 33] },
			{ x: new Date(2016, 08, 01), y: [24, 33] },
			{ x: new Date(2016, 09, 01), y: [19, 31] },
			{ x: new Date(2016, 10, 01), y: [13, 27] },
			{ x: new Date(2016, 11, 01), y: [08, 21] }
		]
	}]
});
chart.render();

}

Chart Customizations

You can modify the type of marker using markerType property. Some other customizations include fillOpacity, color, markerColor, lineColor, lineThickness, etc.