diff --git a/docs/general/colors.md b/docs/general/colors.md index 913cf548207..287ee389dba 100644 --- 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 14292ca6cbf..b2817c85a12 100644 --- 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 index 00000000000..9969d3e2a8e --- /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 index 00000000000..38f281077b3 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 index 00000000000..404d63068dc --- /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 index 00000000000..58121e43f69 Binary files /dev/null and b/test/fixtures/plugin.colors/dynamic-datasets-force-override.png differ