Chart.js V2: Add prefix or suffix to tooltip label

Question

In Chart.js V1.0, I would add tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>" to add a euro symbol as prefix to the tooltip label. However, this no longer works in V2. Does anybody know the new way to do accomplish this? I can't seem to find it.

Many thanks!

score 126 · Accepted Answer · edited Oct 04 '18 at 08:02

126

In the V2.0 the tooltipTemplate option is deprecated. Instead you can use callbacks to modify the displayed tooltips. There is a sample for the usage of callbacks here and you can find 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: 'line',
    data: lineChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' €';
                    }
                }
            },
     }       
  });

Don't forget to set the HTML meta tag:

<meta charset="UTF-8">

edited Oct 04 '18 at 08:02

zed

2,298
4
27
44

answered Jan 18 '16 at 12:47

bencekd

1,575
1
12
8

3

If you have problems displaying the tooltips after that, please look into this issue and how to fix it: https://github.com/nnnick/Chart.js/issues/1891 – bencekd Jan 18 '16 at 12:52
2

for v3, I resolved the issue by `options: { plugins: { tooltip: { callbacks: { label: callbackFunction } } } }` – Chance Park Jun 11 '21 at 08:52
v3 official example here https://www.chartjs.org/docs/3.5.0/configuration/tooltip.html – Andrew Schultz Dec 27 '21 at 06:28

score 60 · Answer 2 · answered May 31 '16 at 18:09

60

In addition to iecs' answer, if you want to return the exact default text and add some more (like a € sign in your case), use following syntax :

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {            
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' €';
                }
            }

        }
    }
});

answered May 31 '16 at 18:09

Luc Lérot

681
5
4

6

This is what I've been searching for half the day, thank you!! All other suggestions kept replacing the default text and label. – Megaroeny Jan 11 '17 at 16:26
1

V3 has an example of how to do this https://www.chartjs.org/docs/3.5.0/configuration/tooltip.html – Andrew Schultz Dec 27 '21 at 06:28

score 21 · Answer 3 · answered Jun 15 '16 at 18:07

See if it helps:

        var config = {
            options: {
                tooltips: {
                    callbacks: {
                        title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; },
                        label: function (tooltipItem, data) {
                            var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
                            return amount + ' / ' + total + ' ( ' + parseFloat(amount * 100 / total).toFixed(2) + '% )';
                        },
                        //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; }
                    }
                },
            }
        };

Using ChartJS 2.7.1 and the above helped me to display the Label, Value and a Symbol after many hours of searching. — JMD, Feb 01 '18 at 00:23

score 13 · Answer 4 · answered Jul 23 '18 at 18:31

13

This set "label + value + €"

options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
            }
        }
    }
}

answered Jul 23 '18 at 18:31

aletede91

1,137
2
16
30

1

This is the only thing that worked for me. The accepted answer doesn't work for me, maybe it did work at the time... – Andrew Howard Dec 02 '19 at 16:52
2

This answer works for Donut, Pie and other type of graphs like this. This should be the accepted answer I guess. – Vincent Decaux Feb 03 '20 at 16:48

Karl · Answer 5 · 2016-11-06T10:30:29.727

If you have a stacked bar chart (and I assume a stacked line chart) and you want to format all the data points included in a single bar with a currency symbol, you can do something like this:

    tooltips: {
        mode: 'label',
        callbacks: {
            label: function (tooltipItems, data) {
                return '$' + tooltipItems.yLabel;
            }
        }
    },

Note the value of mode.

If you want to have finer control of the tool tip, for example include the labels as they appear the chart's legend, you can do something like this:

    tooltips: {
        mode: 'single',  // this is the Chart.js default, no need to set
        callbacks: {
            label: function (tooltipItems, data) {
                var i, label = [], l = data.datasets.length;
                for (i = 0; i < l; i += 1) {
                    label[i] = data.datasets[i].label + ' : ' + '$' + data.datasets[i].data[tooltipItems.index];
                }
                return label;
            }
        }
    },

This worked for me with a slight modification on the first code block. There's an extra 's in ``tooltipItem`` in this line ``return '$' + tooltipItems.yLabel``. This results in no tool tips visible. — MjBVala, Mar 16 '21 at 08:10

score 7 · Answer 6 · answered Oct 06 '17 at 17:49

Just updating @Luc Lérot's answer. I had the same problem and his code helped me out but not fixed it, I had to modify it to work for me. Using Chart.js version 2.6.0

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {            
        tooltips: {
               callbacks: {
                   label: function (tooltipItems, data) {
                       return data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + ' €';
                   }
              }

        }
    }
});

score 3 · Answer 7 · answered Apr 21 '22 at 09:05

As we continue our way along the release chain, the answer once again changes in Chart.js v3.X with the updated options API.

An example of adding temperature units is as follows:

const options = {
    plugins: {
        tooltip: {
            callbacks: {
                label: (item) =>
                    `${item.dataset.label}: ${item.formattedValue} °C`,
            },
        },
    },
}

score 1 · Answer 8 · answered Dec 17 '20 at 16:36

To generalize code, let's use unitPrefix and unitSuffix for the datasets, for example:

datasets: [
    {
        label: 'Loss Rate',
        data: [],
        unitSuffix: "%",
    },
    {
        label: 'Price',
        data: [],
        unitPrefix: "$",
    },

Then we could have this code:

options: {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                let dataset = data.datasets[tooltipItem.datasetIndex];
                let blocks = [];
                if (dataset.label) {
                    blocks.push(${dataset.label} + ':');
                }
                if (dataset.unitPrefix) {
                    blocks.push(dataset.unitPrefix);
                }
                blocks.push(dataset.data[tooltipItem.index])
                if (dataset.unitSuffix) {
                    blocks.push(dataset.unitSuffix);
                }
                return blocks.join(' ');
            },
        },
    },
},

score 0 · Answer 9 · answered Sep 01 '22 at 01:46

0

Chart.js version 3.9.1

const options: ChartOptions = {
  plugins: {
    tooltip: {
      callbacks: {
        label: ({ label, formattedValue }) => `${label}:${formattedValue}g`
      }
    }
  }
}

answered Sep 01 '22 at 01:46

Joan Gavelán

91
1
3

Chart.js V2: Add prefix or suffix to tooltip label

9 Answers9

Linked