Skip to content

Error with Chartjs radar pointLabels color Scriptable

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?

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'
            }
        }
    }
}

Example: https://codepen.io/leelenaleee/pen/PomZgoW