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">
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 + ' €';
}
}
}
}
});
21👍
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.'; }
}
},
}
};
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] + '€';
}
}
}
}
8👍
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;
}
}
},
7👍
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] + ' €';
}
}
}
}
});
3👍
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`,
},
},
},
}
1👍
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(' ');
},
},
},
},
0👍
Chart.js version 3.9.1
const options: ChartOptions = {
plugins: {
tooltip: {
callbacks: {
label: ({ label, formattedValue }) => `${label}:${formattedValue}g`
}
}
}
}