[Chartjs]-How to get percentage from data collected in ChartJS?

3👍

You can accomplish that using the following tooltips label callback function and a chart plugin …

tooltips: {
   callbacks: {
      label: function(tooltipItem, data) {
         var label = data.labels[tooltipItem.index];
         var _data = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
         var data = /\./.test(_data) ? _data.toFixed(2) : _data;
         return label + ' - ' + data + '%';
      }
   }
}

ᴄʜᴀʀᴛ ᴘʟᴜɢɪɴ

plugins: [{
   beforeInit: function(c) {
      var data = c.data.datasets[0].data
      var data_sum = data.reduce((a, b) => a + b, 0);
      var each_one = 100 / data_sum;
      c.data.datasets[0].data = data.map(e => e * each_one);
   }
}]

add the plugin followed by your chart options

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

$(document).ready(function() {
   $.ajax({
      url: "https://istack.000webhostapp.com/json/t5.json",
      method: "GET",
      success: function(data) {
         var source = [];
         var count = [];

         for (var i in data) {
            source.push(data[i].source);
            count.push(+data[i].number);
         }

         var config = {
            type: 'doughnut',
            data: {
               datasets: [{
                  data: count,
                  backgroundColor: [
                     'rgba(59, 89, 152, 1)',
                     'rgba(54, 162, 235, 1)',
                     'rgba(255, 206, 86, 1)',
                     'rgba(75, 192, 192, 1)',
                     'rgba(153, 102, 255,1)',
                     'rgba(255, 159, 64, 1)'
                  ]
               }],
               labels: source
            },
            options: {
               responsive: false,
               legend: {
                  position: 'bottom',
               },
               title: {
                  display: false,
                  text: 'Chart.js Doughnut Chart'
               },
               animation: {
                  animateScale: true,
                  animateRotate: true
               },
               tooltips: {
                  callbacks: {
                     label: function(tooltipItem, data) {
                        var label = data.labels[tooltipItem.index];
                        var _data = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        var data = /\./.test(_data) ? _data.toFixed(2) : _data;
                        return label + ' - ' + data + '%';
                     }
                  }
               }
            },
            plugins: [{
               beforeInit: function(c) {
                  var data = c.data.datasets[0].data
                  var data_sum = data.reduce((a, b) => a + b, 0);
                  var each_one = 100 / data_sum;
                  c.data.datasets[0].data = data.map(e => e * each_one);
               }
            }]
         }
         var ctx = $('#chartCanvas');
         window.myDoughnut = new Chart(ctx, config);
      },
      error: function(data) {
         console.log(data);
      }
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chartCanvas" height="200"></canvas>

0👍

$(document).ready(function() {
   $.ajax({
      url: "https://istack.000webhostapp.com/json/t5.json",
      method: "GET",
      success: function(data) {
         var source = [];
         var count = [];

         for (var i in data) {
            source.push(data[i].source);
            count.push(+data[i].number);
         }

         var config = {
            type: 'doughnut',
            data: {
               datasets: [{
                  data: count,
                  backgroundColor: [
                     'rgba(59, 89, 152, 1)',
                     'rgba(54, 162, 235, 1)',
                     'rgba(255, 206, 86, 1)',
                     'rgba(75, 192, 192, 1)',
                     'rgba(153, 102, 255,1)',
                     'rgba(255, 159, 64, 1)'
                  ]
               }],
               labels: source
            },
            options: {
               responsive: false,
               legend: {
                  position: 'bottom',
               },
               title: {
                  display: false,
                  text: 'Chart.js Doughnut Chart'
               },
               animation: {
                  animateScale: true,
                  animateRotate: true
               },
               tooltips: {
                  callbacks: {
                     label: function(tooltipItem, data) {
                        var label = data.labels[tooltipItem.index];
                        var _data = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        var data = /\./.test(_data) ? _data.toFixed(2) : _data;
                        return label + ' - ' + data + '%';
                     }
                  }
               }
            },
            plugins: [{
               beforeInit: function(c) {
                  var data = c.data.datasets[0].data
                  var data_sum = data.reduce((a, b) => a + b, 0);
                  var each_one = 100 / data_sum;
                  c.data.datasets[0].data = data.map(e => e * each_one);
               }
            }]
         }
         var ctx = $('#chartCanvas');
         window.myDoughnut = new Chart(ctx, config);
      },
      error: function(data) {
         console.log(data);
      }
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chartCanvas" height="200"></canvas>

Leave a comment