How to set colors for Chart.js tooltip labels
Solution 1
You haven't defined anything called data
in the labelColor
callback function. Another confusion with this callback in charts.js, is the second parameter passed to the labelColor callback function is the chart instance, and not the datasets like some of the other chartjs callbacks.
Anyway, this should work.
labelColor: function(tooltipItem, chart) {
var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
return {
backgroundColor : dataset.backgroundColor
}
}
Solution 2
You might want to try with labelTextColor instead of labelColor
This is a feature available since Chartjs 2.7 https://github.com/chartjs/Chart.js/releases/tag/v2.7.0 (Feature #4199)
Solution 3
labelTextColor: function(tooltipItem, chart) {
if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label === "amount")
{
return "#1ff368";
}
if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label ==="transactions") {
return "#8577ec";
}
}
just type your chart label like "amount" and then modify your colors in hand
Thilina Nakkawita
With more than 8 years of experience, an expert in C#, ASP .NET & MVC, and SQL Server with database analysis and design. Skilled in developing business plans, requirements specifications, user documentation, and architectural systems research.
Updated on June 05, 2022Comments
-
Thilina Nakkawita over 1 year
In Chart.js I am unable to set a color for the tooltip.I want to color the label "December 2016" as same as the color of the legend (Blue).
Please see below;
graphOptions.tooltips = { enabled: true, mode: 'single', displayColors: false, callbacks: { title: function (tooltipItem, data) { if (tooltipItem.length > 0) { return tooltipItem[0].xLabel + ': ' + tooltipItem[0].yLabel +" Scans"; } return ""; }, label: function (tooltipItem, data) { if (data.datasets.length > 0) { return data.datasets[tooltipItem.datasetIndex].label; } return ''; }, labelColor: function (tooltipItem, chartInstace) { if (data.length > 0) { return data[tooltipItem.datasetIndex].backgroundColor; } } } };
-
Windmill over 6 yearsThis question was asked a while back but... Any idea why this would not work? I can set the backgroundColor if I do so in
tooltips {...}
, but doing so using the function in callbacks does nothing, even if I hard-code a particular color.. Any ideas? -
funkysoul almost 6 yearsThere is no labelTextColor property for tooltips.. I think the appropriate option would be bodyFontColor.
-
Alvin Chipmunk almost 6 yearsThere is now since Chartjs 2.7 github.com/chartjs/Chart.js/releases/tag/v2.7.0 (Feature #4199)
-
Shaya Ulman about 3 yearsHow is
data
not undefined?