How do i edit chartjs tooltip to add customized strings in tooltips
For Example: I want to change the Tooltip like "January: 28 Files" or just "28 Files"
To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), and the second one contains the bars. In this second column, we then add HTML <div> tags and define the width of these boxes with our numerical columns.
Basic Tooltip HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With