Allow dynamic datasets to be colored (#10964)

* Allow dynamic datasets to be colored

* revieuw

diff --git a/docs/general/colors.md b/docs/general/colors.md
index 20d2459f3c9a74196cd45cc135b7db8ecf13a647..f2b4c8d78423869d56e43aedcb75a74863459c56 100644 (file)
--- a/docs/general/colors.md
+++ b/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.

diff --git a/src/plugins/plugin.colors.ts b/src/plugins/plugin.colors.ts
index 14292ca6cbf2678b586ab406f41cb315342e5641..b2817c85a127017a8f4b2fc7484418d36de6cd02 100644 (file)
--- a/src/plugins/plugin.colors.ts
+++ b/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,7 +86,8 @@ export default {
 
   defaults: {
     enabled: true,
-  },
+    forceOverride: false
+  } as ColorsPluginOptions,
 
   beforeLayout(chart: Chart, _args, options: ColorsPluginOptions) {
     if (!options.enabled) {
@@ -93,12 +95,11 @@ export default {
     }
 
     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;
     }
 

diff --git a/test/fixtures/plugin.colors/dynamic-datasets-default.js b/test/fixtures/plugin.colors/dynamic-datasets-default.js
new file mode 100644 (file)
index 0000000..9969d3e
--- /dev/null
+++ b/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();
+    }
+  }
+};

diff --git a/test/fixtures/plugin.colors/dynamic-datasets-default.png b/test/fixtures/plugin.colors/dynamic-datasets-default.png
new file mode 100644 (file)
index 0000000..38f2810
Binary files /dev/null and b/test/fixtures/plugin.colors/dynamic-datasets-default.png differ

diff --git a/test/fixtures/plugin.colors/dynamic-datasets-force-override.js b/test/fixtures/plugin.colors/dynamic-datasets-force-override.js
new file mode 100644 (file)
index 0000000..404d630
--- /dev/null
+++ b/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();
+    }
+  }
+};

diff --git a/test/fixtures/plugin.colors/dynamic-datasets-force-override.png b/test/fixtures/plugin.colors/dynamic-datasets-force-override.png
new file mode 100644 (file)
index 0000000..58121e4
Binary files /dev/null and b/test/fixtures/plugin.colors/dynamic-datasets-force-override.png differ