How to use HTML in custom tooltip in angular charts?

Question

Is it possible to render HTML in a tooltip on a chart using angular-chart 1.0? I've built the chart below, but need to render two values on separate lines in the tooltip, however the br tag is appearing as text

<div ng-app="doughnutApp" ng-controller="DoughnutCtrl as doughnutCtrl">
  <canvas id="doughnut" 
          class="chart chart-doughnut" 
          chart-data="doughnutCtrl.labelsValues.values" 
          chart-labels="doughnutCtrl.labelsValues.labels" 
          chart-options="doughnutCtrl.chartOptions">
  </canvas>
</div>

<script>
  var app = angular.module('doughnutApp', ['chart.js']);
  app.controller('DoughnutCtrl', function() {
    var vm = this;
    vm.labelsValues = {
      "labels": ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"],
      "values": [1, 2, 3, 4, 5, 6, 7, 8]
    };

    vm.chartOptions = {
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            return "Line 1<br/>Line 2";
          }
        }
      }
    };
  });
</script>

Working plunker here: http://plnkr.co/jtOM2PIccrb87wmFZc0p

One workaround is to put one line in the "label" callback and the other in the "beforeLabel" callback, but that still wouldn't render colours, font styles, etc

reading through the [chart.js documentation](http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration) it looks like there's no functionality to use HTML for a tooltip — Joseph McCarthy, Sep 16 '16 at 14:40

score 4 · Accepted Answer · answered Mar 03 '17 at 17:46

4

You should use an array for "simulate" new line:

tooltips: {
    //mode: "label",
    callbacks: {
        label: function(tooltipItem, data) {
            var legend = new Array();
            for(var i in data.datasets){
                legend.push(
                    data.datasets[i].label + ": " + parseFloat(data.datasets[i].data[tooltipItem.index])
                );
            }

            return legend;
        }
    }
},

answered Mar 03 '17 at 17:46

icy

1,468
3
16
36

Thank you so much, been searching for a while for this answer. Worked for me. – Ananthapadmanabhan Feb 19 '20 at 04:01
Replace loop with: `return data.datasets.map(dataset => dataset.label + ': ' + parseFloat(dataset.data[tooltipItem.index]));` – Dem Pilafian Jun 15 '20 at 19:55

How to use HTML in custom tooltip in angular charts?

1 Answers1