[Chartjs]-How to show percentage (%) in chart js

by

17👍

✅

in the chart options, you can use the tooltips callback to customize the tooltip.

here, the % sign is added to the standard tooltip text… 

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '%';
    }
  }
}

see following working snippet… 

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['confirmed', 'pending'],
    datasets: [{
      data: [67, 33],
      backgroundColor: [
        'rgba(41, 121, 255, 1)',
        'rgba(38, 198, 218, 1)',
        'rgba(138, 178, 248, 1)',
        'rgba(255, 100, 200, 1)',
        'rgba(116, 96, 238, 1)',
        'rgba(215, 119, 74, 1)',
        'rgba(173, 92, 210, 1)',
        'rgba(255, 159, 64, 1)',
        'rgba(247, 247, 247, 1)',
        'rgba(227, 247, 227, 1)',
      ],
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutoutPercentage: 80,
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] + '%';
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment