I researched how to change label colors for my radar chart with chart.js.
I tried scaleFontColor
but that doesn't work for me.
var data = {
labels: ["titi", "tata", "tutu"],
datasets: [{
fillColor: "rgba(51,49,90,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [12, 18, 22]
}]
};
var options = {
responsive: true
};
var chart = document.getElementById('chart-area-x').getContext('2d');
new Chart(chart).Radar(data, options);
I want to put a specific color to "titi", "tata" and "tutu".
Based on Chart.js 2.7 documentation we may color labels with options.scale.pointLabels.fontColor
:
let tagsLabel = [ 'Axe1', 'Axe2', 'Axe3'];
let chart = new Chart(targetNode, {
type: 'radar',
data: {
labels: tagsLabel,
datasets: [
{
data: [
0, 2,
],
}
]
},
options: {
responsive: true,
legend: {
position: 'left'
},
title: {
display: true,
text: "It work's"
},
animation: {
animateScale: true,
animateRotate: true
},
scale: {
// ticks: {
// backdropColor: 'red',
// // Include a dollar sign in the ticks
// callback: function(value, index, values) {
// return '$' + value;
// }
// }
pointLabels: {
// callback: function(value, index, values) {
// return '$' + value;
// }
fontColor: tagsLabel.map((lbl)=>randColor()),
},
},
}
});
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