Refering to documentation (3.4.1) the color of labels in chartjs radar chart is a scriptable and customizable via options.scales.r.pointLabels.color, I have been trying to set a different label color for each tick.
The problem is that when passing a function as the property value as explained in the scriptable documentation the context does not contain the property dataIndex (as is the example), and the index property (which is instead present) only goes up to 10 and is missing in further labels:
options: {
scales: {
r: {
pointLabels: {
color: function(context) {
return Colors.r[context.dataIndex];
}
}
}
}
}
I also found posts that declared that you could achieve what I need also by directly passing the Colors array in the property but also in that case it does not work past the 10th label
Is it a bug? Any way to achieve this?
Advertisement
Answer
This is currently a bug in chart.js. It generates the context for the labels on the size of the ticks array so as a workaround you can specify the count in the ticks array to be the same size as the amount of pointLabels you have
scales: {
r: {
ticks: {
count: 24
},
pointLabels: {
color: (ctx) => {
return ctx.index % 2 === 0 ? 'green' : 'red'
}
}
}
}