JavaScript Doughnut Charts with Custom Inner Radius

Download JavaScript Chart Samples

You can change the inner radius of a Doughnut / Donut Chart to make it aesthetically pleasing. Changing inner radius to 0 will turn a Doughnut Graph to Pie Graph. You can also change (outer) radius of the Doughnut Chart. The given example shows JavaScript Doughnut Chart with Customized Inner Radius. It also contains the 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 chart = new CanvasJS.Chart("chartContainer", {
	theme: "dark2",
	exportFileName: "Doughnut Chart",
	exportEnabled: true,
	animationEnabled: true,
	title:{
		text: "Monthly Expense"
	},
	legend:{
		cursor: "pointer",
		itemclick: explodePie
	},
	data: [{
		type: "doughnut",
		innerRadius: 90,
		showInLegend: true,
		toolTipContent: "<b>{name}</b>: ${y} (#percent%)",
		indexLabel: "{name} - #percent%",
		dataPoints: [
			{ y: 450, name: "Food" },
			{ y: 120, name: "Insurance" },
			{ y: 300, name: "Travelling" },
			{ y: 800, name: "Housing" },
			{ y: 150, name: "Education" },
			{ y: 150, name: "Shopping"},
			{ y: 250, name: "Others" }
		]
	}]
});
chart.render();

function explodePie (e) {
	if(typeof (e.dataSeries.dataPoints[e.dataPointIndex].exploded) === "undefined" || !e.dataSeries.dataPoints[e.dataPointIndex].exploded) {
		e.dataSeries.dataPoints[e.dataPointIndex].exploded = true;
	} else {
		e.dataSeries.dataPoints[e.dataPointIndex].exploded = false;
	}
	e.chart.render();
}

}

Chart Customizations

You can change the inner & outer radius of doughnut chart using innerRadius and radius properties available at the data series level. Other frequently used customization options are startAngle, explodeOnClick, color, etc.