jQuery Spline Charts & Graphs

Spline Chart is useful when you want to show smooth gradual changes and is very similar to Line Chart. It uses smooth curved lines and thus are also known as Smoothed / Curved Line Chart. The given example shows simple Spline Chart along with HTML / jQuery source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var options = {
	animationEnabled: true,  
	title:{
		text: "Monthly Sales - 2017"
	},
	axisX: {
		valueFormatString: "MMM"
	},
	axisY: {
		title: "Sales (in USD)",
		prefix: "$",
		includeZero: false
	},
	data: [{
		yValueFormatString: "$#,###",
		xValueFormatString: "MMMM",
		type: "spline",
		dataPoints: [
			{ x: new Date(2017, 0), y: 25060 },
			{ x: new Date(2017, 1), y: 27980 },
			{ x: new Date(2017, 2), y: 33800 },
			{ x: new Date(2017, 3), y: 49400 },
			{ x: new Date(2017, 4), y: 40260 },
			{ x: new Date(2017, 5), y: 33900 },
			{ x: new Date(2017, 6), y: 48000 },
			{ x: new Date(2017, 7), y: 31500 },
			{ x: new Date(2017, 8), y: 32300 },
			{ x: new Date(2017, 9), y: 42000 },
			{ x: new Date(2017, 10), y: 52160 },
			{ x: new Date(2017, 11), y: 49400 }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Related Customization

You can change the look and feel of Spline Charts by using markerSize, markerType & lineThickness properties. Also the zoomEnabled property can be used to enable or disable the zoom / pan feature.

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