backgroundColor doesn't work since v4?

[DavideViolante]

Expected behavior

On latest v3 I used options.backgroundColor: [array of strings of hex colors]. On v4 it doesn't seem to have any effect, and I can't find any migration about that.

Edit: it seems it must be inside datasets array, where is this mentioned in the migration from v3 to v4?!

Current behavior

Default light blue colors are shown.

Reproducible sample

https://codepen.io/davideviolante/pen/NWBWdaa

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.1.1

Browser name and version

No response

Link to your project

No response

[stockiNail]

See #10927

You could disable the colors plugin or move the backgroundColor in the dataset definition.

[LeeLenaleee]

I think this is an oversight in the check if the plugin needs to be enabled.

[DavideViolante]

Thanks I moved inside datasets[i].backgroundColor and it seems to work like before.
But this should be mentioned in the migration docs or somewhere.

[stockiNail]

@DavideViolante as @LeeLenaleee outlined, what I proposed is a workaround. It seems to be an oversight in the plugin implementation.

@LeeLenaleee I think the issue is

Chart.js/src/plugins/plugin.colors.ts

Lines 70 to 72 in da34804

	function containsColorsDefinitions(
	descriptors: ColorsDescriptor[] | Record<string, ColorsDescriptor>
	) {

because is invoked passing the options but I doesn't seem matching the type. I think it should ColorsDescriptor (no array) but maybe I'm wrong.

[LeeLenaleee]

The problem is that the function is invoked with the dataset and the elements but not the root of the options in which you can also define it.

Chart.js/src/plugins/plugin.colors.ts

Lines 97 to 102 in da34804

	const {
	options: {elements},
	data: {datasets}
	} = chart.config;
	if (!options.forceOverride && (containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements))) {

[stockiNail]

@LeeLenaleee FYI I have submitted a PR.