Chart.js V2: Add prefix or suffix to tooltip label
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!
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">
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 + ' €';
}
}
}
}
});
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.'; }
}
},
}
};