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);
               }
         }
      }
 }
 }
 }

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);
               }
         }
      }
 }
 }
 }

• javascript
• chart.js
• pie-chart

Share Improve this question Follow asked Jan 15, 2020 at 0:29 Amit MogheAmit Moghe 5911 silver badge66 bronze badges 1

• What about using the chartjs-plugin-datalabels? – HeadhunterKev Commented Jan 15, 2020 at 11:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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./ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr/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./ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>