Chartjs-Chartjs Percents in Legend

by

3👍

✅

Replace your legendCallback function with the following :

legendCallback: function(chart) {
   var text = [];
   text.push('<ul class="' + chart.id + '-legend">');
   var data = chart.data;
   var datasets = data.datasets;
   var labels = data.labels;
   if (datasets.length) {
      for (var i = 0; i < datasets[0].data.length; ++i) {
         text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
         if (labels[i]) {
            // calculate percentage
            var total = datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
               return previousValue + currentValue;
            });
            var currentValue = datasets[0].data[i];
            var percentage = Math.floor(((currentValue / total) * 100) + 0.5);

            text.push(labels[i] + ' (' + percentage + '%)');
         }
         text.push('</li>');
      }
   }
   text.push('</ul>');
   return text.join('');
}

Basically, you would also need to calculate the percentage for legend­‘s labels, as you are doing for tooltips.

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var getValues = [1, 2, 3],
   getLabels = ['Jan', 'Feb', 'Mar'],
   getColorValues = ['red', 'green', 'blue']
var chart = new Chart(ctx, {
   type: 'doughnut',
   data: {
      datasets: [{
         data: getValues,
         backgroundColor: getColorValues,
      }],
      labels: getLabels
   },
   options: {
      responsive: true,
      tooltips: {
         callbacks: {
            label: function(tooltipItem, data) {

               var dataset = data.datasets[tooltipItem.datasetIndex];

               var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
                  return previousValue + currentValue;
               });

               var currentValue = dataset.data[tooltipItem.index];

               var precentage = Math.floor(((currentValue / total) * 100) + 0.5);

               return precentage + "%";
            }
         }
      },
      legendCallback: function(chart) {
         var text = [];
         text.push('<ul class="' + chart.id + '-legend">');

         var data = chart.data;
         var datasets = data.datasets;
         var labels = data.labels;

         if (datasets.length) {
            for (var i = 0; i < datasets[0].data.length; ++i) {
               text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
               if (labels[i]) {

                  // calculate percentage
                  var total = datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
                     return previousValue + currentValue;
                  });
                  var currentValue = datasets[0].data[i];
                  var precentage = Math.floor(((currentValue / total) * 100) + 0.5);

                  text.push(labels[i] + ' (' + precentage + '%)');
               }
               text.push('</li>');
            }
         }
         text.push('</ul>');
         return text.join('');
      },
      legend: {
         display: false,
      },
      elements: {
         arc: {
            borderWidth: 0
         }
      },
      cutoutPercentage: 70,
      title: {
         display: true
      },
      animation: {
         animateScale: true,
         animateRotate: true
      }
   }
});

document.getElementById('js-legend').innerHTML = chart.generateLegend();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
<div id="js-legend"></div>

Leave a comment