score:4

Accepted answer

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>


Related Query

More Query from same tag