CODEWITHSUNDEEP
javascriptchartschart.js
user3699954
user3699954

Reputation: 31

Chart.js Radar background color of background

anyone did know if there is possible to change background area of a Radar like the image, i poster?enter image description here

Upvotes: 0

Views: 6202

Answers (2)

cramirez
cramirez

Reputation: 31

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

Upvotes: 3

Archagy
Archagy

Reputation: 135

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.

Upvotes: 2

Related Questions