jQuery Range Spline Area Charts & Graphs

Range Spline Area Chart is same as the Range Area Chart except that it uses smooth curves. Given example shows Range Area Chart along with HTML / jQuery source code that you can edit in-browser or save to run it locally.

Try Editing The Code

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: "{x} 
 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);

}

Related Customization

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