score:0

Accepted answer

you can do this by defining a tooltip label callback function as follows.

tooltips: {
  callbacks: {
    label: (tooltipitem, data) => {
      var value = data.datasets[0].data[tooltipitem.index];
      var total = data.datasets[0].data.reduce((a, b) => a + b, 0);
      var pct = 100 / total * value;
      var pctrounded = math.round(pct * 10) / 10;
      return value + ' (' + pctrounded + '%)';
    }
  }
}

please have a look at below runnable code snippet.

new chart('empgender', {
  type: 'doughnut',
  data: {
    labels: ['male', 'female'],
    datasets: [{
      backgroundcolor: ['#f56954', '#00a65a'],
      bordercolor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)'],
      data: [17, 7],
      borderwidth: 1
    }]
  },
  options: {
    maintainaspectratio: true,
    responsive: true,
    cutoutpercentage: 80,
    tooltips: {
      callbacks: {
        label: (tooltipitem, data) => {
          var value = data.datasets[0].data[tooltipitem.index];
          var total = data.datasets[0].data.reduce((a, b) => a + b, 0);
          var pct = 100 / total * value;
          var pctrounded = math.round(pct * 10) / 10;
          return value + ' (' + pctrounded + '%)';
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="empgender" height="100"></canvas>


Related Query

More Query from same tag