JavaScript Doughnut / Donut Charts & Graphs

Doughnut Charts are similar to pie charts except for a blank center. Doughnut Chart, also referred to as 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 simple Doughnut Chart along with HTML / JavaScript 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();

}

Related Customization

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.