Chart.js如何在工具提示上显示％

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>