jQuery Spline Area Charts & Graphs

Spline Area Charts, also referred to as curved / smoothed area chart, are similar to Area Charts except that the envelope of area is a smooth curve. Given example demonstrates Spline Area Chart using jQuery plugin of CanvasJS. It also includes source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var options = {
	exportEnabled: true,
	animationEnabled: true,
	title: {
		text: "jQuery Spline Area Chart"
	},
	data: [
	{
		type: "splineArea",
		dataPoints: [
			{ y: 10 },
			{ y: 6 },
			{ y: 14 },
			{ y: 12 },
			{ y: 19 },
			{ y: 14 },
			{ y: 26 },
			{ y: 10 },
			{ y: 22 }
		]
	}
	]
};
$("#chartContainer").CanvasJSChart(options);

}

Related Customization

You can change the thickness or color of line using lineThickness and lineColor property. Some other customizations include markerSize, markerType, etc.

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