jQuery Doughnut / Donut Charts

Download jQuery Chart Samples

jQuery 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. Below example shows a simple jQuery Doughnut Chart along with HTML source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var options = {
	animationEnabled: true,
	title: {
		text: "ACME Corporation Apparel Sales"
	},
	data: [{
		type: "doughnut",
		innerRadius: "40%",
		showInLegend: true,
		legendText: "{label}",
		indexLabel: "{label}: #percent%",
		dataPoints: [
			{ label: "Department Stores", y: 6492917 },
			{ label: "Discount Stores", y: 7380554 },
			{ label: "Stores for Men / Women", y: 1610846 },
			{ label: "Teenage Specialty Stores", y: 950875 },
			{ label: "All other outlets", y: 900000 }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

radius & innerRadius properties can be used to customize the size of doughnut charts. Some other frequently used customizations options are startAngle, indexLabelPlacement, exploded, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial