Chart.js how to display % on tooltip

Question

I am new to Chart.js. I am making a line chart but I am stuck. I need to display % in a tooltip, but when I add %, the result is not as expected. I have gone to other posts, and none of the solutions helped me out.

HTML:

 <canvas id="myChart2"></canvas>

JS:

  window.onload = function() {
          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: '%',
              data: count,
              backgroundColor: "rgba(38, 82, 123, 0.5)"
            }]
          },
          options: {
              legend: {
                  display: false
              },
            maintainAspectRatio: false,
            responsive: true,
            tooltips: {titleFontSize:12, bodyFontSize:12},
            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
        });
        //End of function
      }()

I am able to display a number in the Y axis as num % as you can see in the callback function I made on YAxes, but when I try in a tooltip is not the same result. I need to be able to display num % in a tooltip as well. Any knowledge will be appreciated. Thanks.

Answer 1

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>