Add check to colors plugin if defaults are set (#11927)

Author: LeeLenaleee

src/plugins/plugin.colors.ts

@@ -1,4 +1,4 @@
-import {DoughnutController, PolarAreaController} from '../index.js';
+import {DoughnutController, PolarAreaController, defaults} from '../index.js';
 import type {Chart, ChartDataset} from '../types.js';
 
 export interface ColorsPluginOptions {
@@ -87,6 +87,10 @@ function containsColorsDefinition(
   return descriptor && (descriptor.borderColor || descriptor.backgroundColor);
 }
 
+function containsDefaultColorsDefenitions() {
+  return defaults.borderColor !== 'rgba(0,0,0,0.1)' || defaults.backgroundColor !== 'rgba(0,0,0,0.1)';
+}
+
 export default {
   id: 'colors',
 
@@ -106,7 +110,13 @@ export default {
     } = chart.config;
     const {elements} = chartOptions;
 
-    if (!options.forceOverride && (containsColorsDefinitions(datasets) || containsColorsDefinition(chartOptions) || (elements && containsColorsDefinitions(elements)))) {
+    const containsColorDefenition = (
+      containsColorsDefinitions(datasets) ||
+      containsColorsDefinition(chartOptions) ||
+      (elements && containsColorsDefinitions(elements)) ||
+      containsDefaultColorsDefenitions());
+
+    if (!options.forceOverride && containsColorDefenition) {
       return;
     }
 

test/specs/plugin.colors.tests.js

@@ -1,3 +1,37 @@
 describe('Plugin.colors', () => {
   describe('auto', jasmine.fixture.specs('plugin.colors'));
+
+  describe('Plugin.colors.chartDefaults', () => {
+    beforeAll(() => {
+      Chart.defaults.backgroundColor = ['green', 'yellow'];
+    });
+
+    afterAll(() => {
+      Chart.defaults.backgroundColor = 'rgba(0,0,0,0.1)';
+    });
+
+    it('should not use colors plugin when chart defaults are given', () => {
+      const chart = window.acquireChart({
+        type: 'bar',
+        data: {
+          datasets: [{
+            data: [1, 10],
+            label: 'dataset1'
+          }],
+          labels: ['label1', 'label2']
+        },
+        options: {
+          plugins: {
+            colors: {
+              enabled: true
+            }
+          }
+        }
+      });
+
+      const meta = chart.getDatasetMeta(0);
+      expect(meta.data[0].options.backgroundColor).toBe('green');
+      expect(meta.data[1].options.backgroundColor).toBe('yellow');
+    });
+  });
 });