title: Chart.js how to display % on tooltip
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;canvas id="myChart2"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  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
        }()
  </code></pre>
  
  <p>I am able to display a number in the Y axis as <code>num %</code> 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 <code>num %</code> in a tooltip as well. Any knowledge will be appreciated. Thanks.</p>