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.