jQuery Spline Charts & Graphs

Download jQuery Chart Samples

jQuery Spline Charts are useful when you want to show smooth gradual changes and is very similar to Line Chart. As it uses smooth curved lines, they are also known as Smoothed / Curved Line Chart. The given example shows a simple jQuery Spline Chart along with HTML 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: "$"
	},
	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);

}

Chart Customizations

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