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"
2
-
1there is a tooltip configuration HTML that is available as an option when you define the Global Configuration Options: chartjs.org/docs/#getting-started-global-chart-configurationnicholaswmin– nicholaswmin2014-09-08 12:10:57 +00:00Commented Sep 8, 2014 at 12:10
-
@NicholasKyriakides didn't notice that. Now i can change the template tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> Files" Thanks :)Sudharshan– Sudharshan2014-09-08 12:17:05 +00:00Commented Sep 8, 2014 at 12:17
Add a comment
|
3 Answers
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"
});
1 Comment
This solution doesn't work for V2 of chart.js. If you are in trouble, please take a look to my answer or on this link
The great previous answers do not work with chartjs 3. This example is from the official documentation:
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
var label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
}
return label;
}
}
}
}
}
);
Comments
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, ",");
}