Animated JavaScript Charts & Graphs

Download JavaScript Chart Samples

Create Animated JavaScript Charts & Graphs in minutes using CanvasJS. All chart 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. Below 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();

}

Chart Customizations

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.