Radar chart backgroundColor

[mrleblanc101]

Feature Proposal

I know it's fairly easy to change the backgroundColor of the canvas.
But radar charts are somewhat different.
Since their shape can be different than the canvas, changing the canvas backgroundColor is not a solution

Feature Use Case

There is not way to change the backgroundColor of the chart area for radar charts (excluding legend/title/labels).
I would like my radar chart to have a solid backgroundColor but not the rest of the canvas.

Possible Implementation

options: {
    chartArea: {
        backgroundColor: '#F9F8F7',
    },
}

[mrleblanc101]

I found a snippet of code on StackOverflow (I think) that impremented this feature as a plugin.
The plugin was not published on NPM, so I copy/pasted it in my projet.
I think this should be a native fonctionnality as it could be easily implemented.

this.addPlugin({
    id: 'chartjs-background',
    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 = '#F9F8F7';
        ctx.fill();
        ctx.restore();
    },
});

[LeeLenaleee]

Wont be implemented, as seen in the linked issues from this pr (#8492) it has been marked as an implement external issue.

[mrleblanc101]

@LeeLenaleee We can style almost everything is chartjs. Why would the Radar Chart background need a plugin ?
I understand that having an image background might be more complex and need to be implemented as a plugin, but simple fill color ?
Also, the discoverability is very low when basic feature are pushed into community plugin.
How do you expect people to find about this ? At the very least it should be referenced in the radar documentation.

[LeeLenaleee]

The reason behind it, is proably that the use base would be too small to implement it in the main lib and by that adding size to it.

For most use cases CSS will sattisfies to set a background color. The only place you want to use a plugin is if people also want to download the chart with a background instead of a blanco png.

Also not only radar would need a plugin, all charts would need a plugin for a background or CSS

In the v3 docs there is a whole page about background for your chart.
https://www.chartjs.org/docs/master/configuration/canvas-background

[mrleblanc101]

@LeeLenaleee Also looking at the screenshot in the #8492, this does not do what I'm saying.
I want the background inside the chartArea, not on the canvas.

Current behavior:

Proposed feature:

What the suggested plugin does:

[LeeLenaleee]

I know the plugin fills the whole background, that is why it is an example. You can customize it so it will only fill the radar part

[mrleblanc101]

I don't think the usage would be very low. I've seen quite a few threads about this on StackOverflow. Also this would be quite simple to implement so it don't think it would increase the lib size very much. This is mostly useful for radar chart, but can also be useful on other chart time so that the background doesn't go behind the ticks/legend/title

[LeeLenaleee]

There must have been a reason it got the implement externally label, but if you really want it you can always implement it and make a pull request and see if it gets accepted.

[kurkle]

I think this might be a bit different scenario, because its actually the scale area background we are talking about. Could be used on cartesian scales too. @etimberg what do you think?

[mrleblanc101]

@LeeLenaleee I don't even understand the point of your plugin. I could just set the backgroundColor using CSS if I wanted to do this. Same apply for an image.

canvas {
    background: green;
    // background: url('something.png')
}

The point is to fill the background of the chart which can have an arbitrary shape. In my exemple it's simple because it's a circle, but If I disable circlar gridLines (gridLines: { circular: false }), then the shape is a polygon which make it impossible to fill the background correctly.

[LeeLenaleee]

The point of the plugin is as I described for verry limited use cases, if you download the chart by copying the canvas or converting it to base64 image the css gets ignored so you need to have drawn the background on the canvas to export it with that background,

but as kurkle pointed out this is a slightly different point of view on what you want as the issues linked in the pr

[mrleblanc101]

@LeeLenaleee And my feature request is for a totally different use case

[LeeLenaleee]

well not totally different, you can still achieve it with a custom plugin, its just a smaller size of the canvas you want a background on

[mrleblanc101]

@LeeLenaleee Yes the use case is completely different, the shape can be anything (rectangle, circle, polygon).
Also this use case is purely decorative.