How to modify chartjs tooltip so i can add customized strings in tooltips
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"
});
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.
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, ",");
}