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.

  1. <?php
  2.  
  3. $dataPoints = array( 
  4. 	array("label"=>"Industrial", "y"=>51.7),
  5. 	array("label"=>"Transportation", "y"=>26.6),
  6. 	array("label"=>"Residential", "y"=>13.9),
  7. 	array("label"=>"Commercial", "y"=>7.8)
  8. )
  9.  
  10. ?>
  11. <!DOCTYPE HTML>
  12. <html>
  13. <head>
  14. <script>
  15. window.onload = function() {
  16.  
  17.  
  18. var chart = new CanvasJS.Chart("chartContainer", {
  19. 	theme: "light2",
  20. 	animationEnabled: true,
  21. 	title: {
  22. 		text: "World Energy Consumption by Sector - 2012"
  23. 	},
  24. 	data: [{
  25. 		type: "pie",
  26. 		indexLabel: "{y}",
  27. 		yValueFormatString: "#,##0.00\"%\"",
  28. 		indexLabelPlacement: "inside",
  29. 		indexLabelFontColor: "#36454F",
  30. 		indexLabelFontSize: 18,
  31. 		indexLabelFontWeight: "bolder",
  32. 		showInLegend: true,
  33. 		legendText: "{label}",
  34. 		dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
  35. 	}]
  36. });
  37. chart.render();
  38.  
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  44. <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  45. </body>
  46. </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.