How to label axis on ChartJS radar chart? - chart.js

Question

I read all docs I could and searched all over the internet attempting to achieve the following (attached image) on ChartJS 3.9.1. Is it even possible to have each axis on a radar chart labeled on ChartJS?
radar chart

Answer 1

I had the same problem as you and found this solution:
Define the array of base64 images you want as labels
const labelImages = [
/* Image 2 */ 'data:image/png;base64,iVBORw0KGg......',
/* Image 1 */ 'data:image/png;base64,iVBORw0KGgoAA.....'
]
Then use the plugin:
plugins: [
{
id: 'Label images',
afterDraw: (chart) => {
for (const i in chart.scales.r._pointLabelItems) {
const point = chart.scales.r._pointLabelItems[i];
var image = new Image();
image.src = labelImages[i];
// you I had 20x20 images thats why I use 20x20
chart.ctx.drawImage(image, point.x - 10, point.y, 20, 20);
}
}
}
]
Draw image from context options
This solution draws images where the labels are (where they start, i think), if you want only images and no text then you should hide the labels. I did it like this:
options: {
// just so that the images are not outside the canvas
layout: {
padding: 20
},
scales: {
y: {
display: false
},
x: {
display: false
},
r: {
pointLabels: {
// Hides the labels around the radar chart but leaves them in the tooltip
callback: function (label, index) {
return ' ';
}
}
}
}
}
I hope this helps