Chartjs-Chart.js Radar background color of background

by

3👍

I had the same issue, looks like the documentations isn’t friendly for these cases, I based my solution on these examples:

My options object looks like this:

options: {
    ...
    chartArea: { backgroundColor: 'red' },
    ...
}

I used the hook function beforeDraw in order to draw the background-color behind the chart and it looks like this:

Chart.pluginService.register({
    beforeDraw: chart => {
        const { ctx, scale, config } = chart
        const { xCenter, yCenter, drawingArea: radius } = scale

        ctx.save()
        ctx.arc(xCenter, yCenter, radius, 0, Math.PI * 2)
        ctx.fillStyle = config.options.chartArea.backgroundColor
        ctx.fill()
        ctx.restore()
    }
});

In beforeDraw function you can catch options object with your custom attributes.

You can check full list of hooks here

2👍

I assume you’re using this module from the chart.js library

https://www.chartjs.org/docs/latest/charts/radar.html

The documentation says you can change the color specifying it on the datasets properties.

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2],
        backgroundColor: 'red'
    }]
}

Hope that helps.

Leave a comment