Animated JavaScript Charts & Graphs

Download JavaScript Code Samples

Animation makes the chart look more appealing. All chart types in CanvasJS including column, pie, line, doughnut, area, etc support animated rendering. Library provides option to enable or disable animation along with the control over duration of animation. The given example shows market share of desktop browsers in 2016 in an animated Pie Chart. It includes HTML / JavaScript source code for chart that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	exportEnabled: true,
	animationEnabled: true,
	title: {
		text: "Desktop Browser Market Share in 2016"
	},
	data: [{
		type: "pie",
		startAngle: 25,
		toolTipContent: "<b>{label}</b>: {y}%",
		showInLegend: "true",
		legendText: "{label}",
		indexLabelFontSize: 16,
		indexLabel: "{label} - {y}%",
		dataPoints: [
			{ y: 51.08, label: "Chrome" },
			{ y: 27.34, label: "Internet Explorer" },
			{ y: 10.62, label: "Firefox" },
			{ y: 5.02, label: "Microsoft Edge" },
			{ y: 4.07, label: "Safari" },
			{ y: 1.22, label: "Opera" },
			{ y: 0.44, label: "Others" }
		]
	}]
});
chart.render();

}

Related Customization

You can control the animation duration using animationDuration property. You can also explode any data point by setting exploded property in pie, doughnut or funnel graph.