JavaScript Doughnut / Donut Charts & Graphs

Download JavaScript Chart Samples

JavaScript Doughnut Charts are similar to pie charts except for a blank center. Donut Charts are useful when you want to visually compare contribution of various items to the whole. Doughnut charts are beautiful, interactive, cross-browser compatible, supports animation, exporting as image & real time updates. Given example shows JavaScript Donut Chart along with HTML source code that you can edit in-browser or save to run it locally.

Try Editing The Code

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Email Categories",
		horizontalAlign: "left"
	},
	data: [{
		type: "doughnut",
		startAngle: 60,
		//innerRadius: 60,
		indexLabelFontSize: 17,
		indexLabel: "{label} - #percent%",
		toolTipContent: "<b>{label}:</b> {y} (#percent%)",
		dataPoints: [
			{ y: 67, label: "Inbox" },
			{ y: 28, label: "Archives" },
			{ y: 10, label: "Labels" },
			{ y: 7, label: "Drafts"},
			{ y: 15, label: "Trash"},
			{ y: 6, label: "Spam"}
		]
	}]
});
chart.render();

}

Chart Customizations

Setting exploded property for some data point makes it look visually distinctive. You can also customize innerRadius or radius property. Some other common customization options are explodeOnClick, startAngle, indexLabelPlacement etc.