Allow dynamic datasets to be colored

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 `forceColorsPlugin` option to true:
+
+```js
+const options = {
+  plugins: {
+    colors: {
+      forceColorsPlugin: 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;
+  forceColorsPlugin: boolean;
 }
 
 interface ColorsDescriptor {
@@ -85,20 +86,20 @@ export default {
 
   defaults: {
     enabled: true,
+    forceColorsPlugin: false
   },
 
-  beforeLayout(chart: Chart, _args, options: ColorsPluginOptions) {
+  beforeDatasetsUpdate(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 ((containsColorsDefinitions(datasets) || elements && containsColorsDefinitions(elements)) && !options.forceColorsPlugin) {
       return;
     }