Chartjs-How to label axis on ChartJS radar chart?

by

0👍

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

Leave a comment