Doughnut chart with percentage of each segment and total placed inside doughnut - CanvasJS JavaScript Charts

Doughnut chart with percentage of each segment and total placed inside doughnut - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
	data: [
	{
		type: "doughnut",
    indexLabel: "#percent%",
    innerRadius: "60%",
    indexLabelPlacement: "inside",
		dataPoints: [
			{ label: "A", y: 71 },
			{ label: "B", y: 55 },
			{ label: "C", y: 50 },
			{ label: "D", y: 65 }
		]
	}					
	]
});

chart.render();
var total = 0;
for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
	total += chart.options.data[0].dataPoints[i].y;
}
chart.set("title", {text:total, verticalAlign: "center"});