diff --git a/src/plugins/plugin.colors.ts b/src/plugins/plugin.colors.ts index fdc8d7e3b69..8286c27c569 100644 --- a/src/plugins/plugin.colors.ts +++ b/src/plugins/plugin.colors.ts @@ -4,8 +4,6 @@ export interface ColorsPluginOptions { enabled?: boolean; } -type DatasetColorizer = (dataset: ChartDataset, i: number) => void; - interface ColorsDescriptor { backgroundColor?: unknown; borderColor?: unknown; @@ -32,38 +30,41 @@ function getBackgroundColor(i: number) { return BACKGROUND_COLORS[i % BACKGROUND_COLORS.length]; } -function createDefaultDatasetColorizer() { - return (dataset: ChartDataset, i: number) => { - dataset.borderColor = getBorderColor(i); - dataset.backgroundColor = getBackgroundColor(i); - }; +function colorizeDefaultDataset(dataset: ChartDataset, i: number) { + dataset.borderColor = getBorderColor(i); + dataset.backgroundColor = getBackgroundColor(i); + + return ++i; } -function createDoughnutDatasetColorizer() { - let i = 0; +function colorizeDoughnutDataset(dataset: ChartDataset, i: number) { + dataset.backgroundColor = dataset.data.map(() => getBorderColor(i++)); - return (dataset: ChartDataset) => { - dataset.backgroundColor = dataset.data.map(() => getBorderColor(i++)); - }; + return i; +} + +function colorizePolarAreaDataset(dataset: ChartDataset, i: number) { + dataset.backgroundColor = dataset.data.map(() => getBackgroundColor(i++)); + + return i; } -function createPolarAreaDatasetColorizer() { +function getColorizer(chartType: string) { let i = 0; return (dataset: ChartDataset) => { - dataset.backgroundColor = dataset.data.map(() => getBackgroundColor(i++)); + const type = dataset.type || chartType; + + if (type === 'doughnut' || type === 'pie') { + i = colorizeDoughnutDataset(dataset, i); + } else if (type === 'polarArea') { + i = colorizePolarAreaDataset(dataset, i); + } else if (type) { + i = colorizeDefaultDataset(dataset, i); + } }; } -function getColorizer(type: string) { - if (type === 'doughnut' || type === 'pie') { - return createDoughnutDatasetColorizer(); - } else if (type === 'polarArea') { - return createPolarAreaDatasetColorizer(); - } - return createDefaultDatasetColorizer(); -} - function containsColorsDefinitions( descriptors: ColorsDescriptor[] | Record ) { @@ -100,7 +101,8 @@ export default { return; } - const colorizer: DatasetColorizer = getColorizer(type); + const colorizer = getColorizer(type); + datasets.forEach(colorizer); } }; diff --git a/test/fixtures/plugin.colors/mixed.js b/test/fixtures/plugin.colors/mixed.js new file mode 100644 index 00000000000..2ea5b83b910 --- /dev/null +++ b/test/fixtures/plugin.colors/mixed.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + data: { + labels: [0, 1, 2, 3], + datasets: [ + { + type: 'line', + data: [5, 20, 1, 10], + }, + { + type: 'bar', + data: [6, 16, 3, 19] + }, + { + type: 'pie', + data: [5, 20, 1, 10], + } + ] + }, + options: { + scales: { + x: { + ticks: { + display: false, + } + }, + y: { + ticks: { + display: false, + } + } + }, + plugins: { + legend: false, + colors: { + enabled: true + } + } + } + } +}; diff --git a/test/fixtures/plugin.colors/mixed.png b/test/fixtures/plugin.colors/mixed.png new file mode 100644 index 00000000000..d507dd0f844 Binary files /dev/null and b/test/fixtures/plugin.colors/mixed.png differ