title: Chartjs adding icon to tooltip and label
body: <p>I want to add a prefix to the tooltip and y-label in chartjs, but the problem is, when I put the <code>&lt;i class='fa fa-sampleicon'&gt;&lt;/i&gt;</code> it is returned as string not as an html tag as you can see on the image</p>
  
  <p><a href="https://i.stack.imgur.com/1SfWO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1SfWO.png" alt="label and tooltips chartjs"></a></p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function(){
      var lineLabel = &lt;?php echo json_encode(array_reverse( $ch1_arrDate)); ?&gt;;
      var dataVal1 = &lt;?php echo json_encode(array_reverse( $ch1_arrRevenue_conf)); ?&gt;;
      var dateFilter = &lt;?php echo json_encode(array_reverse($ch1_arrDate2)); ?&gt;;
  
      var lineData = {
          labels: lineLabel,
          datasets: [
              {
                  label: 'Confirmed Revenue',
                  backgroundColor: 'rgba(0,0,0,0.03)',
                  data: dataVal1,
                  borderColor: 'rgba(163,216,3,1)',
                  borderWidth:1,
              },
          ]
      };
  
  
      var lineOptions = {
          responsive: true,
          maintainAspectRatio: true,
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true,
                      userCallback: function(value, index, values) {
                          return "&lt;i class='fa fa-sampleicon'&gt;&lt;/i&gt;"+addCommas(value);
                      }
                  }
              }]
          },
          legend: {
              display: true,
              position: 'bottom'
          },
          tooltips: {
            callbacks: {
              label: function(tooltipItem, data) {
                return "&lt;i class='fa fa-sampleicon'&gt;&lt;/i&gt;"+addCommas(tooltipItem.yLabel);
              }
            }
          }
  
      }
  
  
      var ctx = document.getElementById("chart1").getContext("2d");
  
      if($(window).width()&gt;748){
          ctx.canvas.height = 160;
      }
      else{
          ctx.canvas.height = 300;
      }
  
      var chartDisplay = new Chart(ctx, {
          type: 'line',
          data: lineData,
          options: lineOptions
      });
  
      $("#chart1").click( 
         function(e){
              var activeLines= chartDisplay.getElementsAtEvent(e);
              var index = activeLines[0]["_index"];
              window.open(
              "dash_chartdeals.php?from=past&amp;filter_date="+fixedEncodeURIComponent(dateFilter[index]),
              '_blank'
              )
      });
  
  
      $("#chart1").mouseenter(function(){
          $("#chart1").css("cursor", "pointer");
      });
  });
  function addCommas(nStr)
  {
      nStr += '';
      x = nStr.split('.');
      x1 = x[0];
      x2 = x.length &gt; 1 ? '.' + x[1] : '';
      var rgx = /(\d+)(\d{3})/;
      while (rgx.test(x1)) {
          x1 = x1.replace(rgx, '$1' + ',' + '$2');
      }
      return x1 + x2;
  }
  
  &lt;/script&gt;
  </code></pre>