jQuery Charts & Graphs with Animation

Download jQuery Code Samples

Animation makes the chart look more elegant. The given example shows market share of desktop OS in 2017 in an animated 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);

}

Related Customization

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