PHP Pie Charts with Index / Data Labels placed Inside

Download PHP Chart Samples

Customizing the look and feel of chart is really easy in CanvasJS. Given example shows Pie Chart with index / data labels placed inside the slice of Pie. It also includes PHP source code that you can try running locally.

<?php

$dataPoints = array( 
	array("label"=>"Industrial", "y"=>51.7),
	array("label"=>"Transportation", "y"=>26.6),
	array("label"=>"Residential", "y"=>13.9),
	array("label"=>"Commercial", "y"=>7.8)
)

?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {


var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	animationEnabled: true,
	title: {
		text: "World Energy Consumption by Sector - 2012"
	},
	data: [{
		type: "pie",
		indexLabel: "{y}",
		yValueFormatString: "#,##0.00\"%\"",
		indexLabelPlacement: "inside",
		indexLabelFontColor: "#36454F",
		indexLabelFontSize: 18,
		indexLabelFontWeight: "bolder",
		showInLegend: true,
		legendText: "{label}",
		dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

Chart Customizations

Index / Data Labels can be positioned either inside or outside the pie using indexLabelPlacement property. SOme other commonly used customization options are indexLabelFontColor, indexLabelFontSize, etc.