jQuery Range Spline Area Charts & Graphs

Download jQuery Chart Samples

Range Spline Area Chart is same as the Range Area Chart except that it uses smooth curves. Given example shows jQuery Range Area Chart along with HTML 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 options = {
	exportEnabled: true,
	animationEnabled: true,
	title:{
		text: "Monthly Average Temperature Variation in Tokyo"
	},		
	axisX: {
		valueFormatString: "MMMM"
	},
	axisY: { 
		title: "Temperature (°C)",
		suffix: " °C"
	},
	data: [{
		type: "rangeSplineArea",
		indexLabel: "{y[#index]}°",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "<b>{x}</b> </br> Min: {y[0]} °C, Max: {y[1]} °C",
		dataPoints: [
			{ x: new Date(2016, 00, 01), y: [4, 16] },
			{ x: new Date(2016, 01, 01), y: [7, 23] },
			{ x: new Date(2016, 02, 01), y: [6, 21] },
			{ x: new Date(2016, 03, 01), y: [13, 27] },
			{ x: new Date(2016, 04, 01), y: [18, 31] },
			{ x: new Date(2016, 05, 01), y: [19, 33] },
			{ x: new Date(2016, 06, 01), y: [22, 37] },
			{ x: new Date(2016, 07, 01), y: [24, 37] },
			{ x: new Date(2016, 08, 01), y: [20, 33] },
			{ x: new Date(2016, 09, 01), y: [13, 32] },
			{ x: new Date(2016, 10, 01), y: [3, 21] },
			{ x: new Date(2016, 11, 01), y: [8, 20] }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

The markers can be customized using markerType property. Other frequently used customization options include markerColor, lineThickness, lineColor, fillOpacity.

Note   For step by step instructions, follow our jQuery Integration Tutorial