[Chartjs]-Chart.js how to display % on tooltip

by

2👍

✅

You can use a callback function for tooltips label, to display a % sign along with the data value, as such :

tooltips: {
   callbacks: {
      label: function(t, d) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel;
         return xLabel + ': ' + yLabel + '%';
      }
   }
}

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

var ctx2 = document.getElementById('myChart2').getContext('2d');
var data = [{
   date: '08-05-2017',
   run_rate: 50
}, {
   date: '08-06-2017',
   run_rate: 40
}, {
   date: '08-07-2017',
   run_rate: 30
}, {
   date: '08-08-2017',
   run_rate: 10
}, {
   date: '08-09-2017',
   run_rate: 6
}, {
   date: '08-10-2017',
   run_rate: 78
}, {
   date: '08-11-2017',
   run_rate: 32
}, {
   date: '08-12-2017',
   run_rate: 24
}];
var dates = data.map(function(obj) {
   return obj.date;
});

var count = data.map(function(obj) {
   return obj.run_rate;
});

var myChart = new Chart(ctx2, {
   type: 'line',
   data: {
      labels: dates,
      datasets: [{
         label: 'Line',
         data: count,
         backgroundColor: "rgba(38, 82, 123, 0.5)"
      }]
   },
   options: {
      legend: {
         display: false
      },
      maintainAspectRatio: false,
      responsive: true,
      tooltips: {
         titleFontSize: 12,
         bodyFontSize: 12,
         callbacks: {
            label: function(t, d) {
               var xLabel = d.datasets[t.datasetIndex].label;
               var yLabel = t.yLabel;
               return xLabel + ': ' + yLabel + '%';
            }
         }
      },
      scales: {
         xAxes: [{
            display: true,
            gridLines: {
               display: true
            },
            ticks: {
               fontColor: '#000000'
            },
            scaleLabel: {
               display: false,
               labelString: 'Date',
               fontColor: '#000000'
            }
         }],
         yAxes: [{
            display: true,
            gridLines: {
               display: true
            },
            ticks: {
               fontColor: '#000000',
               callback: function(value) {
                  return value + "%"
               }
            },
            scaleLabel: {
               display: false,
               labelString: '',
               fontColor: '#000000'
            }
         }]
      }
      //Scales Object Ends
   }
   //options object ends
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart2"></canvas>

Leave a comment