score:0

Accepted answer

you must make sure, the label callback function returns an array to make it work as expected. it could be written as follows:

callbacks: {
  label: function(tooltipitem, data) {
    let i = tooltipitem['index'];
    let label = data['labels'][i];
    return label.slice(0, -1).concat(label.slice(-1) + ': ' + data['datasets'][0]['data'][i] + '%');
  }
}

please take a look at below runnable code to see how it works. this is plain javascript but the label callback function will look the same with vue.js.

new chart('chart', {
  type: 'doughnut',
  data: {
    labels: [
      ['lutte contre la corruption', 'active ou passive'],
      ['actions en faveur de la responsabilité', 'sociétale chez les fournisseurs']
    ],
    datasets: [{
      backgroundcolor: ['#0075aa', '#258bb7'],
      data: [90, 7]
    }]
  },
  options: {
    responsive: true,
    maintainaspectratio: false,
    legend: {
      display: false
    },
    animation: {
      duration: 3000,
      easing: 'easeinoutquad'
    },
    tooltips: {
      backgroundcolor: 'rgba(231, 30, 116, .87)',
      callbacks: {
        label: function(tooltipitem, data) {
          let i = tooltipitem['index'];
          let label = data['labels'][i];
          return label.slice(0, -1).concat(label.slice(-1) + ': ' + data['datasets'][0]['data'][i] + '%');
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="chart"></canvas>


Related Query

More Query from same tag