title: Add HTML to label of bar chart - chart js
body: <p>I am using the chart js to display a bar graph. It's working correctly on normal instances, but I am willing to change the color or a small portion of the label i.e, I want to include some HTML on the label of the bar chart. But, it isn't rendering the HTML instead it is showing plain HTML text.</p>
  <p>If it is not possible, it's okay for me if there is another way to achieve this like, change the color of the price and keep the name as it is.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let $js_dom_array = ["43.28", "93.13"];
  let $js_am_label_arr = ["&lt;span&gt;$0&lt;/span&gt; None", "&lt;span class='text-danger'&gt;$23.63&lt;/span&gt; Handicap Accessible"];
  
  let ctx2 = document.getElementById("barChart").getContext("2d");
  
          let chart = new Chart(ctx2, {
              type: 'bar',
              data: {
                  labels: $js_am_label_arr,
                  datasets: [{
                      label: 'Amenity Name',
                      data: $js_dom_array,
                      backgroundColor: 'rgba(26,179,148,0.5)',
                      borderColor: 'rgba(75, 192, 192, 1)',
                      borderWidth: 1
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: true,
                  legendCallback: function(chart) {
                      var text = [];
                      for (var i=0; i&lt;chart.data.datasets.length; i++) {
                          console.log(chart.data.datasets[i]); // see what's inside the obj.
                          text.push(chart.data.datasets[i].label);
                      }
                      return text.join("");
                  },
                  tooltips: {
                      "enabled": false
                  },
                  scales: {
                      xAxes: [{
                          stacked: false,
                          beginAtZero: true,
                          ticks: {
                              stepSize: 1,
                              min: 0,
                              autoSkip: false,
                              callback: function(label, index, labels) {
                                  if (/\s/.test(label)) {
                                      return label.split(" ");
                                  }else{
                                      return label;
                                  }
                              }
                          }
                      }]
                  },
                  animation: {
                      duration: 0,
                      onProgress: function() {
                          var chartInstance = this.chart,
                              ctx = chartInstance.ctx;
                          ctx.font = Chart.helpers.fontString(16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                          ctx.textAlign = 'center';
                          ctx.textBaseline = 'bottom';
                          this.data.datasets.forEach(function(dataset, i) {
                              var meta = chartInstance.controller.getDatasetMeta(i);
                              meta.data.forEach(function(bar, index) {
                                  if (dataset.data[index] &gt; 0) {
                                      let data = dataset.data[index];
                                      ctx.fillText('$'+Math.round(data), bar._model.x, bar._model.y - 5);
                                  }
                              });
                          });
                      }
                  },
              }
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/chart.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
      &lt;canvas id="barChart" height="140"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>#Note: Here, you might see that the data in <code>$js_am_label_arr</code> is already an HTML element, but if there is something from where I could pass the array of the raw values and the convert in HTML than I could pass the raw value (without) as well.
  Currently <code>$js_am_label_arr</code> is created as:</p>
  <pre><code>if($avg_amount &lt; 0){
      $text_color = 'text-danger';
      $avg_amount_text = &quot;&lt;span class='text-danger'&gt;$&quot;.abs($avg_amount).&quot;&lt;/span&gt;&quot;;
  }else{
      $text_color = '';
      $avg_amount_text = &quot;&lt;span&gt;$&quot;.abs($avg_amount).&quot;&lt;/span&gt;&quot;;
  }
  $am_label_arr[] = $avg_amount_text.' '.$fv['amenity_name'];
  </code></pre>
  <p>Update:</p>
  <p><strong>Expected Output</strong></p>
  <p>So if the value is negative for example in the above case, its <code>-$23.63</code>. In this case, I want the label to be ($23.63)[in color red] followed by the name <code>Handicap Accessible</code>. This can be seen at the result as well, <code>text-danger</code> classes is added to show that part in red color.</p>
  <p><a href="https://i.stack.imgur.com/00Hzm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/00Hzm.png" alt="enter image description here" /></a></p>