jQuery Charts & Graphs with Animation

Download jQuery Chart Samples

Animation makes chart look more elegant. Below example shows market share of desktop OS in 2017 in an animated jQuery Pie Chart. It includes HTML / jQuery source code for chart that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var options = {
	title: {
		text: "Desktop OS Market Share in 2017"
	},
	subtitles: [{
		text: "As of November, 2017"
	}],
	animationEnabled: true,
	data: [{
		type: "pie",
		startAngle: 40,
		toolTipContent: "<b>{label}</b>: {y}%",
		showInLegend: "true",
		legendText: "{label}",
		indexLabelFontSize: 16,
		indexLabel: "{label} - {y}%",
		dataPoints: [
			{ y: 48.36, label: "Windows 7" },
			{ y: 26.85, label: "Windows 10" },
			{ y: 1.49, label: "Windows 8" },
			{ y: 6.98, label: "Windows XP" },
			{ y: 6.53, label: "Windows 8.1" },
			{ y: 2.45, label: "Linux" },
			{ y: 3.32, label: "Mac OS X 10.12" },
			{ y: 4.03, label: "Others" }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

Any section of pie, doughnut, funnel or pyramid chart can be exploded by setting the exploded property. Also you can control the duration of animation using animationDuration property. Other commonly used customization options include explodeOnClick, highlightEnabled, etc.

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