Pie chart with indexLabels showing Total - CanvasJS JavaScript Charts

Pie chart with indexLabels showing Total - 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", {
  title:{
    text: "indexLabel at dataSeries",
    fontSize: 20
  },

  data: [
    {        
      type: "pie",
      indexLabelPlacement: "inside",  
      dataPoints: [
        { y: 596 },          
        { y: 448 },
        { y: 393 },
        { y: 377 }            
      ]
    }
  ]
});

addIndexLabels(chart);
chart.render();

function addIndexLabels(chart) {
  var total = 0;
  for(var i=0; i<chart.options.data[0].dataPoints.length; i++) {
    total = total + chart.options.data[0].dataPoints[i].y;
    chart.options.data[0].dataPoints[i].indexLabel = "total: " + total.toString();
  }
}