Allow dynamic datasets to be colored (#10964)

* Allow dynamic datasets to be colored

* revieuw

docs/general/colors.md

@@ -84,6 +84,22 @@ const options = {
 
 :::
 
+### Dynamic datasets at runtime
+
+By default the colors plugin only works when you initialize the chart without any colors for the border or background specified. 
+If you want to force the colors plugin to always color your datasets, for example when using dynamic datasets at runtime you will need to set the `forceOverride` option to true:
+
+```js
+const options = {
+  plugins: {
+    colors: {
+      forceOverride: true
+    }
+  }
+};
+```
+
+
 ### Advanced color palettes
 
 See the [awesome list](https://github.com/chartjs/awesome#plugins) for plugins that would give you more flexibility defining color palettes.

src/plugins/plugin.colors.ts

@@ -1,8 +1,9 @@
 import {DoughnutController, PolarAreaController} from '../index.js';
-import type {Chart, ChartConfiguration, ChartDataset} from '../types.js';
+import type {Chart, ChartDataset} from '../types.js';
 
 export interface ColorsPluginOptions {
   enabled?: boolean;
+  forceOverride?: boolean;
 }
 
 interface ColorsDescriptor {
@@ -85,20 +86,20 @@ export default {
 
   defaults: {
     enabled: true,
-  },
+    forceOverride: false
+  } as ColorsPluginOptions,
 
   beforeLayout(chart: Chart, _args, options: ColorsPluginOptions) {
     if (!options.enabled) {
       return;
     }
 
     const {
-      type,
       options: {elements},
       data: {datasets}
-    } = chart.config as ChartConfiguration;
+    } = chart.config;
 
-    if (containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements)) {
+    if (!options.forceOverride && (containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements))) {
       return;
     }
 

test/fixtures/plugin.colors/dynamic-datasets-default.js

@@ -0,0 +1,42 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          data: [5, 5, 5, 5, 5, 5]
+        }
+      ]
+    },
+    options: {
+      scales: {
+        x: {
+          ticks: {
+            display: false,
+          }
+        },
+        y: {
+          ticks: {
+            display: false,
+          }
+        }
+      },
+      plugins: {
+        legend: false,
+        colors: {
+          enabled: true
+        }
+      }
+    }
+  },
+  options: {
+    run(chart) {
+      chart.data.datasets.push({
+        data: [5, 5, 5, 5, 5, 5]
+      });
+
+      chart.update();
+    }
+  }
+};

test/fixtures/plugin.colors/dynamic-datasets-force-override.js

@@ -0,0 +1,43 @@
+module.exports = {
+  config: {
+    type: 'bar',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          data: [5, 5, 5, 5, 5, 5]
+        }
+      ]
+    },
+    options: {
+      scales: {
+        x: {
+          ticks: {
+            display: false
+          }
+        },
+        y: {
+          ticks: {
+            display: false
+          }
+        }
+      },
+      plugins: {
+        legend: false,
+        colors: {
+          enabled: true,
+          forceOverride: true
+        }
+      }
+    }
+  },
+  options: {
+    run(chart) {
+      chart.data.datasets.push({
+        data: [5, 5, 5, 5, 5, 5]
+      });
+
+      chart.update();
+    }
+  }
+};