jQuery Pie Charts with Index / Data Labels placed Inside

Download jQuery Chart Samples

CanvasJS jQuery Plugin provides several customization options to change the look and functionality of the graph. Given example shows Pie Chart with index / data labels placed inside the Chart. It also contains 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 = {
	exportEnabled: true,
	animationEnabled: true,
	title:{
		text: "Accounting"
	},
	legend:{
		horizontalAlign: "right",
		verticalAlign: "center"
	},
	data: [{
		type: "pie",
		showInLegend: true,
		toolTipContent: "<b>{name}</b>: ${y} (#percent%)",
		indexLabel: "{name}",
		legendText: "{name} (#percent%)",
		indexLabelPlacement: "inside",
		dataPoints: [
			{ y: 6566.4, name: "Housing" },
			{ y: 2599.2, name: "Food" },
			{ y: 1231.2, name: "Fun" },
			{ y: 1368, name: "Clothes" },
			{ y: 684, name: "Others"},
			{ y: 1231.2, name: "Utilities" }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

indexLabelPlacement property can be used to place the indexLables either "inside" or "outside" the dataPoint. Some other commonly used customization options are indexLabelBackgroundColor, color, explodeOnClick, etc.

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