How to modify chartjs tooltip so i can add customized strings in tooltips

Question

How do i edit chartjs tooltip to add customized strings in tooltips

enter image description here

For Example: I want to change the Tooltip like "January: 28 Files" or just "28 Files"

there is a tooltip configuration HTML that is available as an option when you define the Global Configuration Options: http://www.chartjs.org/docs/#getting-started-global-chart-configuration — nicholaswmin, Sep 08 '14 at 12:10
@NicholasKyriakides didn't notice that. Now i can change the template tooltipTemplate: ": Files" Thanks :) — Sudharshan, Sep 08 '14 at 12:17

score 23 · Answer 1 · edited May 23 '17 at 11:54

23

Validated answer doesn't work anymore. For Chart.js V2,

Chart.defaults.global.tooltipTemplate

is deprecated.

Instead you can use callbacks to modify the displayed tooltips. There is a sample for the usage the possible callbacks in the documentation under Chart.defaults.global.tooltips.

In your case I would do the following:

window.myLine = new Chart(chart, {
    type: 'bar',
    data: barChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' : ' + tooltipItems.xLabel + " Files";
                    }
                }
            },
     }       
  });

Don't forget to set the HTML meta tag:

<meta charset="UTF-8">

This answer was copy from this question.

edited May 23 '17 at 11:54

Community

1
1

answered Apr 28 '17 at 09:19

Benjamin Lucidarme

1,960
1
22
39

1

This does nothing for me in Chart.js v2.7.1 – Tyguy7 Jan 30 '18 at 03:19
1

I just tried with version 2.7.1 and it works for me. You probably do it in a wrong way. – Benjamin Lucidarme Jan 30 '18 at 08:45
yLabel and xLabel are undefined in my callback. So I changed it to data.labels[tooltipItems.index] + ": CHF " + this.decimalPipe.transform(data.datasets[0].data[tooltipItems.index], "1.2-2") – Heiner Sep 24 '20 at 19:40
I have this version working. If I had a list of strings, with each string corresponding to the datapoint to be displayed, how could I display this on the data set? For example. of the data set values were [1,2,3,4,5] and I had a list of strings being ['notes for item 1', 'notes for item 2', 'notes for item 3', 'notes for item 3', 'notes for item 5'] - I need the string being displayed on the tooltip. Any ideas? – petworthnick Jan 16 '21 at 08:38

score 10 · Accepted Answer · edited Sep 14 '15 at 23:40

10

Redefine default global tooltip template as follows:

Chart.defaults.global.tooltipTemplate =
  "<%if (label){%><%=label%>: <%}%><%= value %>";

Here is another example:

var ctx = document.getElementById("canvas").getContext("2d");

var myBarChart = new Chart(ctx).Bar(data, {
        tooltipTemplate: "<%= value %> Files"
});

edited Sep 14 '15 at 23:40

Dave Jarvis

29,586
38
176
304

answered Sep 08 '14 at 12:24

Sudharshan

3,158
1
25
26

This solution doesn't work for V2 of chart.js. If you are in trouble, please take a look to my answer or on this [link](http://stackoverflow.com/questions/34720530/chart-js-v2-add-prefix-or-suffix-to-tooltip-label) – Benjamin Lucidarme Apr 28 '17 at 09:21

John Bonfardeci · Answer 3 · 2020-11-21T17:19:13.560

Drawing from other responses I've found that helped me, apparently the label properties can be set to functions, For example, to format currency:

var overrides = {
  // show lables as currency
  scaleLabel: toCurrency,

  // String - Template string for single tooltips
  tooltipTemplate: toCurrency,

  // String - Template string for multiple tooltips
  multiTooltipTemplate: toCurrency
}

function toCurrency(label) {
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

score 1 · Answer 4 · answered Nov 10 '21 at 11:40

The great previous answers do not work with chartjs 3. This example is from the official documentation:

const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    plugins: {
        tooltip: {
            callbacks: {
                label: function(context) {
                    const label = context.dataset.label || '';

                    if (label) {
                        label += ': ';
                    }
                    if (context.parsed.y !== null) {
                        label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                    }
                    return label;
                }}}}}});

How to modify chartjs tooltip so i can add customized strings in tooltips

4 Answers4

Linked