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.

B

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 = ""
        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 = '';
        titleLines.forEach(function(title) {
            innerHtml += '' + title + '';
        });
        innerHtml += '';
        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 = '';
            innerHtml += '' + span + body + '';
        });
        innerHtml += '';
        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.