javascript - Chart JS Show HTML in Tooltip

Question

I've been fighting with Chart JS's documentation trying to figure out how to modify the content of a line chart's tool tip when you hover over a specific point.

Basically, I want to display the values on all the same vertical axis whenever a single point is hovered over. I've tried something like this:

tooltips: {
    callbacks: {
        label: function(tooltipItem, data){
            console.log(data);
            var html = "";
            for(var dataset in data.datasets){
                html += "<label>" + data.datasets[dataset].label + ": " + data.datasets[dataset].data[tooltipItem.index] + "%</label><br/>";
            }
            return html;
        }
    },
},

This works to the degree of looping over each data set and appending <label>Example: 0%<br/></label> for each dataset, but when I return that HTML, the tooltip literally displays the string:

<label>Example1: 1%</label><br/><label>Example2: 5%</label><br/> ...

Instead of rendering the correct HTML:

Example1: 1%
Example2: 5%
...

Now, I know that Chart JS version 1.0 has the tooltipTemplate option, but I can't seem to figure out if there is any way to return HTML in the tooltips.callbacks.label option. There's documentation for how to do custom tooltips, which I will end up using if I can't figure this out, but any help would be appreciated.

Answer 1

As of v2.4, the callbacks unfortunately don't allow for HTML currently. You'll need to write a custom tooltip function.

Examples can be found in the samples folder for chart-js (although some are better than others I found).

https://github.com/chartjs/Chart.js/tree/v2.4.0/samples/tooltips

Try running the samples to get a feel for how the options and modifications affect the tooltip function.

For example in the line chart example of a custom function:

Chart.defaults.global.pointHitDetectionRadius = 1;
var customTooltips = function(tooltip) {
    // Tooltip Element
    var tooltipEl = document.getElementById('chartjs-tooltip');
    if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.id = 'chartjs-tooltip';
        tooltipEl.innerHTML = "<table></table>"
        document.body.appendChild(tooltipEl);
    }
    // Hide if no tooltip
    if (tooltip.opacity === 0) {
        tooltipEl.style.opacity = 0;
        return;
    }
    // Set caret Position
    tooltipEl.classList.remove('above', 'below', 'no-transform');
    if (tooltip.yAlign) {
        tooltipEl.classList.add(tooltip.yAlign);
    } else {
        tooltipEl.classList.add('no-transform');
    }
    function getBody(bodyItem) {
        return bodyItem.lines;
    }
    // Set Text
    if (tooltip.body) {
        var titleLines = tooltip.title || [];
        var bodyLines = tooltip.body.map(getBody);
        //PUT CUSTOM HTML TOOLTIP CONTENT HERE (innerHTML)
        var innerHtml = '<thead>';
        titleLines.forEach(function(title) {
            innerHtml += '<tr><th>' + title + '</th></tr>';
        });
        innerHtml += '</thead><tbody>';
        bodyLines.forEach(function(body, i) {
            var colors = tooltip.labelColors[i];
            var style = 'background:' + colors.backgroundColor;
            style += '; border-color:' + colors.borderColor;
            style += '; border-width: 2px'; 
            var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
            innerHtml += '<tr><td>' + span + body + '</td></tr>';
        });
        innerHtml += '</tbody>';
        var tableRoot = tooltipEl.querySelector('table');
        tableRoot.innerHTML = innerHtml;
    }
    var position = this._chart.canvas.getBoundingClientRect();
    // Display, position, and set styles for font
    tooltipEl.style.opacity = 1;
    tooltipEl.style.left = position.left + tooltip.caretX + 'px';
    tooltipEl.style.top = position.top + tooltip.caretY + 'px';
    tooltipEl.style.fontFamily = tooltip._fontFamily;
    tooltipEl.style.fontSize = tooltip.fontSize;
    tooltipEl.style.fontStyle = tooltip._fontStyle;
    tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};

Then set this as the custom tooltip function in the options for the chart:

window.myLine = new Chart(chartEl, {
    type: 'line',
    data: lineChartData,
    options: {
        title:{
            display:true,
            text:'Chart.js Line Chart - Custom Tooltips'
        },
        tooltips: {
            enabled: false,
            mode: 'index',
            position: 'nearest',
            //Set the name of the custom function here
            custom: customTooltips
        }
    }
});

EDIT: Apologies, I only read the title of your question, not the full question. What you ask can be done more simply and without HTML in the tooltips (unless it's required for another reason) by changing the interaction mode to index in the options. There's a sample available to show how this works.