is there a chance to change the color of the "footer" elements depending on it's value? This is my current footer - callback where the sum is calculated and my goal is to change the font color to red if it is negative.
I'm trying to prevent using a "html - content tooltip" as always suggested because the positing of it seems a little bit tricky and the canvas one does a pretty good job.
footer: function (tooltipItems) {
let sum = tooltipItems[0].parsed.y - tooltipItems[1].parsed.y;
sum = appCore.formatNumber(sum, page.pc(), true, true);
return `${page.translations['label.sum']}: ${sum}`;
},
Within the documentation I've found "footerColor" but it seems the value can only set once? I tried the following in the footer method:
chart.instance.options.plugins.tooltip.footerColor = (sum >= 0) ? '#283823' : '#762552';
"chart" is my global instance which I've stored during the initialization of the chart.
I hope someone can push me in the right direction.
Thanks, Christian
I dont know where you get the instance part from since its not on the chart if I log it. But yes its possible, you can either do it globally (first outcommented line), you can do it for a specific chart at creation (second outcommented line) or for a specific chart after creation (last line)
//Chart.defaults.plugins.tooltip.footerColor = (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red')
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
footer: () => ('fff')
},
//footerColor: (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red')
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
chart.options.plugins.tooltip.footerColor = (ctx) => (ctx.tooltip.dataPoints[0].parsed.y > 10 ? 'green' : 'red');
chart.update();<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>