How do you add custom text to tooltips in charts.js

Question

I am currently fiddling around with some charts, and I would like for there to be a string of text to come up as you hover over certain data points.

So for example, currently my dataset looks like this:

var data = {
    labels: ["January", "February:", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My first dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

I would like for example, to hover over the February : 59 point and have it display "February : 59 - Some unique text"

Thank you

check this out man http://www.chartjs.org/docs/#advanced-usage-external-tooltips — uzaif, Apr 14 '16 at 02:03
Does this answer your question? [How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?](https://stackoverflow.com/questions/43604597/how-to-customize-the-tooltip-of-a-chart-js-2-0-doughnut-chart) — Andrew, Jan 15 '21 at 17:00

score 0 · Answer 1 · answered Apr 14 '16 at 02:08

first add this in html

<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>

:js

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

var myLineChart = new Chart(ctx).Line(data, {
    customTooltips: function (tooltip) {
        var tooltipEl = $('#chartjs-tooltip');

        if (!tooltip) {
            tooltipEl.css({
                opacity: 0
            });
            return;
        }

        tooltipEl.removeClass('above below');
        tooltipEl.addClass(tooltip.yAlign);

        // split out the label and value and make your own tooltip here
        var parts = tooltip.text.split(":");
        var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
        tooltipEl.html(innerHtml);

        tooltipEl.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle,
        });
    }
});

and some styling stuff

:css

 #chartjs-tooltip {
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }

Doesn't this just make the number bold? I would like it to add custom text that isn't part of labels or data. Thanks. — Julian Lok, Apr 14 '16 at 02:19
@uzaif i'm thinking the OP wants to know where to put custom text so that it will render in the tooltip. That is what i'm trying to do and how I found this question. — Adam Heeg, Apr 10 '18 at 17:16

score 0 · Answer 2 · answered Jan 15 '21 at 17:09

(Note that Chart.js already adds tooltip text automatically; the question above is a bit unclear. What the question is about is how to add custom text to the tooltip, rather than just the defaults that it picks - the x and y values of the given point.) Use the callbacks field in options.tooltips. Note that the body of the tooltip is referred to as the "label".

tooltips: {
    intersect: false, // makes it easier to select tooltips on mobile
    callbacks: {
        title: (toolTipItem, data) => {
            let title = toolTipItem[0].x; // uses the x value of this point as the title
            return title;
        },
        label: (toolTipItem, data) => {
            let labels = data[toolTipItem.index!].labelText; // assumes your data has a `labelText` field.
            return labels;
        },
    },
},

Note that some fields, like title, are passed an array of toolTipItem objects in their callback; others, like label, are passed a single object. Hence, properties of the toolTipItem object must be accessed differently for each.

Callback documentation: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
Properties you can access on the toolTipItem object - https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface
Some official examples: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
- Unofficial: How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?

How to wrap long label lines? One way or the other, split up your labels into an array, and return that; each line in the array will be on a separate line. If the lines are still too long, you'll need to use a function to detect long lines and split them into additional array items.

How do you add custom text to tooltips in charts.js

2 Answers2