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 it looks like there's no functionality to use HTML for a tooltip — mccarthyj
– mccarthyj, Commented Sep 16, 2016 at 14:40

icy · Accepted Answer · 2017-03-03 17:46:50Z

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 3, 2017 at 17:46

icy

1,4463 gold badges16 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ananthapadmanabhan Over a year ago

Thank you so much, been searching for a while for this answer. Worked for me.

Pilaf T. Pilafian Over a year ago

Replace loop with: return data.datasets.map(dataset => dataset.label + ': ' + parseFloat(dataset.data[tooltipItem.index]));

Collectives™ on Stack Overflow

How to use HTML in custom tooltip in angular charts?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related