How to show slice value inside of slice in pie chart using chart.js

Question

I am having an scenario, where I need to show the slice value inside of the slice in pie chart. I am having more than 1 pie charts on my webpage. Below code is perfectly working but only for 1st Pie Chart and for others its throwing error as below, could you please help me to sort this out?

Error:: unCaught TypeError: cannot read the property 'data' of undefined.

 Code:: 
 options:{
 animation:{
 onComplete:function(){
      var ctx = this.chart.ctx;
      var dataset_obj = this.data.datasets;
      for (var i=0;i<dataset_obj.length; i++){
          var meta_obj = dataset_obj[i]._meta[i].data;
          for (var j=0; j<meta_obj.length; j++){
               var model =meta_obj[j]._model;
               start_angle= model.startAngle;
               end_angle = model.endAngle;
               mid_angle =start_angle + ( end_angle -start_angle)/2;
               mid_radius = model.innerRadius + (model.outerRadius -model.innerRadius)/2;
               var x =mid_radius*math.cos(mid_angle);
               var  y = mid_radius*math.cos(mid_angle);

               ctx.fillstyle='#fff';
               if (dataset_obj[i].data[j] != 0 && meta_obj[j].hidden != true){
                    ctx.fillText(dataset_obj[i].data[j], model.x+x, model.y+y);
               }
         }
      }
 }
 }
 }

uminder uminder · Accepted Answer · 2020-01-15T11:55:32

This answers the issue contained in the question's title:

How to show slice value inside of slice in pie chart using chart.js

The code snippet below show how to display the values inside the slices with the use of chartjs-plugin-labels. The code of the samples was extracted from the chartjs-plugin-labels demo page.

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'pie',    
    data: {
      labels: ['January', 'February', 'March'],
      datasets: [{
        data: [50445, 33655, 15900],
        backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'value',
          fontColor: ['green', 'white', 'red']
        }
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

If you want to display the percentage of each slice, you can do the following:

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'pie',    
    data: {
      labels: ['January', 'February', 'March'],
      datasets: [{
        data: [50445, 33655, 15900],
        backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'percentage',
          fontColor: ['green', 'white', 'red'],
          precision: 2
        }
      },
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

How to show slice value inside of slice in pie chart using chart.js

1 Answers