[Solved]-Chart.js V2: Add prefix or suffix to tooltip label-Chart.js

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(' ');
            },
        },
    },
},

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`,
            },
        },
    },
}

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] + ' €';
                   }
              }

        }
    }
});

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 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] + '€';
            }
        }
    }
}

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.'; }
                    }
                },
            }
        };

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 + ' €';
                }
            }

        }
    }
});