Merge branch 'chartjs:master' into fix-10951

.gitignore

@@ -11,7 +11,8 @@ npm-debug.log*
 # Docs
 .cache-loader
 build/
-# generated typedocs
+
+# Generated type docs
 docs/api
 docs/.vuepress/dist
 
@@ -31,3 +32,6 @@ docs/.vuepress/dist
 
 # Generated
 /types/tests/autogen*.ts
+
+# Eslint
+.eslintcache

README.md

@@ -10,7 +10,9 @@
     <a href="https://github.com/chartjs/Chart.js/actions?query=workflow%3ACI+branch%3Amaster"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/chartjs/Chart.js/CI"></a>
     <a href="https://coveralls.io/github/chartjs/Chart.js?branch=master"><img src="https://img.shields.io/coveralls/chartjs/Chart.js.svg?style=flat-square&maxAge=600" alt="Coverage"></a>
     <a href="https://github.com/chartjs/awesome"><img src="https://awesome.re/badge-flat2.svg" alt="Awesome"></a>
-    <a href="https://chartjs-slack.herokuapp.com/"><img src="https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600" alt="Slack"></a>
+    <a href="https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw"><img src="https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600" alt="Slack"></a>
+    <br/><br/>
+    <a href="https://www.producthunt.com/posts/chart-js-4-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-chart&#0045;js&#0045;4&#0045;0" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=371192&theme=light" alt="Chart&#0046;js&#0032;4&#0046;0 - Open&#0032;source&#0032;JavaScript&#0032;charting&#0032;library&#0032;for&#0032;the&#0032;modern&#0032;web | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 </p>
 
 ## Documentation

docs/.vuepress/config.ts

@@ -130,7 +130,7 @@ export default defineConfig({
         ariaLabel: 'Community Menu',
         items: [
           { text: 'Awesome', link: 'https://github.com/chartjs/awesome' },
-          { text: 'Slack', link: 'https://chartjs-slack.herokuapp.com/' },
+          { text: 'Slack', link: 'https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw' },
           { text: 'Stack Overflow', link: 'https://stackoverflow.com/questions/tagged/chart.js' }
         ]
       }

docs/developers/contributing.md

@@ -2,7 +2,7 @@
 
 New contributions to the library are welcome, but we ask that you please follow these guidelines:
 
-- Before opening a PR for major additions or changes, please discuss the expected API and/or implementation by [filing an issue](https://github.com/chartjs/Chart.js/issues) or asking about it in the [Chart.js Slack](https://chartjs-slack.herokuapp.com/) #dev channel. This will save you development time by getting feedback upfront and make reviews faster by giving the maintainers more context and details.
+- Before opening a PR for major additions or changes, please discuss the expected API and/or implementation by [filing an issue](https://github.com/chartjs/Chart.js/issues) or asking about it in the [Chart.js Slack](https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw) #dev channel. This will save you development time by getting feedback upfront and make reviews faster by giving the maintainers more context and details.
 - Consider whether your changes are useful for all users, or if creating a Chart.js [plugin](plugins.md) would be more appropriate.
 - Check that your code will pass tests and `eslint` code standards. `pnpm test` will run both the linter and tests for you.
 - Add unit tests and document new functionality (in the `test/` and `docs/` directories respectively).
@@ -11,7 +11,7 @@ New contributions to the library are welcome, but we ask that you please follow
 
 ## Joining the project
 
-Active committers and contributors are invited to introduce themselves and request commit access to this project. We have a very active Slack community that you can join [here](https://chartjs-slack.herokuapp.com/). If you think you can help, we'd love to have you!
+Active committers and contributors are invited to introduce themselves and request commit access to this project. We have a very active Slack community that you can join [here](https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw). If you think you can help, we'd love to have you!
 
 ## Building and Testing
 

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.

docs/getting-started/usage.md

@@ -586,6 +586,6 @@ By importing and registering only select components, we’ve removed more than 5
 
 Now you’re familiar with all major concepts of Chart.js: chart types and elements, datasets, customization, plugins, components, and tree-shaking.
 
-Feel free to review many [examples of charts](../samples/information.html) in the documentation and check the [awesome list](https://github.com/chartjs/awesome) of Chart.js plugins and additional chart types as well as [framework integrations](https://github.com/chartjs/awesome#integrations) (e.g., React, Vue, Svelte, etc.). Also, don’t hesitate to join [Chart.js Slack](https://chartjs-slack.herokuapp.com) and follow [Chart.js on Twitter](https://twitter.com/chartjs).
+Feel free to review many [examples of charts](../samples/information.html) in the documentation and check the [awesome list](https://github.com/chartjs/awesome) of Chart.js plugins and additional chart types as well as [framework integrations](https://github.com/chartjs/awesome#integrations) (e.g., React, Vue, Svelte, etc.). Also, don’t hesitate to join [Chart.js Slack](https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw) and follow [Chart.js on Twitter](https://twitter.com/chartjs).
 
 Have fun and good luck building with Chart.js!

docs/index.md

@@ -4,7 +4,7 @@ Welcome to Chart.js!
 
 * **[Get started with Chart.js](./getting-started/) — best if you're new to Chart.js**
 * Migrate from [Chart.js v3](./migration/v4-migration.html) or [Chart.js v2](./migration/v3-migration.html)
-* Join the community on [Slack](https://chartjs-slack.herokuapp.com/) and [Twitter](https://twitter.com/chartjs)
+* Join the community on [Slack](https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw) and [Twitter](https://twitter.com/chartjs)
 * Post a question tagged with `chart.js` on [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js)
 * [Contribute to Chart.js](./developers/contributing.html)
 
@@ -30,7 +30,7 @@ Chart.js comes with built-in TypeScript typings and is compatible with all popul
 
 ### Developer experience
 
-Chart.js has very thorough documentation (yes, you're reading it), [API reference](./api/), and [examples](./samples/information.html). Maintainers and community members eagerly engage in conversations on [Slack](https://chartjs-slack.herokuapp.com), [GitHub Discussions](https://github.com/chartjs/Chart.js/discussions), and [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js) where more than 11,000 questions are tagged with `chart.js`.
+Chart.js has very thorough documentation (yes, you're reading it), [API reference](./api/), and [examples](./samples/information.html). Maintainers and community members eagerly engage in conversations on [Slack](https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw), [GitHub Discussions](https://github.com/chartjs/Chart.js/discussions), and [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js) where more than 11,000 questions are tagged with `chart.js`.
 
 ### Canvas rendering
 

docs/migration/v3-migration.md

@@ -249,7 +249,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 
 ## Developer migration
 
-While the end-user migration for Chart.js 3 is fairly straight-forward, the developer migration can be more complicated. Please reach out for help in the #dev [Slack](https://chartjs-slack.herokuapp.com/) channel if tips on migrating would be helpful.
+While the end-user migration for Chart.js 3 is fairly straight-forward, the developer migration can be more complicated. Please reach out for help in the #dev [Slack](https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw) channel if tips on migrating would be helpful.
 
 Some of the biggest things that have changed:
 

package.json

@@ -2,7 +2,7 @@
     "name": "chart.js",
     "homepage": "https://www.chartjs.org",
     "description": "Simple HTML5 charts using the canvas element.",
-    "version": "4.0.1",
+    "version": "4.1.0",
     "license": "MIT",
     "type": "module",
     "sideEffects": [
@@ -58,9 +58,9 @@
         "dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox --grep",
         "docs": "pnpm run build && pnpm --filter \"./docs/**\" build",
         "docs:dev": "pnpm run build && pnpm --filter \"./docs/**\" dev",
-        "lint-js": "eslint \"src/**/*.{js,ts}\" \"test/**/*.js\" \"docs/**/*.js\"",
-        "lint-md": "eslint \"**/*.md\"",
-        "lint-types": "eslint \"types/**/*.ts\" && pnpm build && node types/tests/autogen.js && tsc -p types/tests/",
+        "lint-js": "eslint \"src/**/*.{js,ts}\" \"test/**/*.js\" \"docs/**/*.js\" --cache",
+        "lint-md": "eslint \"**/*.md\" --cache",
+        "lint-types": "eslint \"types/**/*.ts\" --cache && pnpm build && node types/tests/autogen.js && tsc -p types/tests/",
         "lint": "concurrently \"pnpm:lint-*\"",
         "test-size": "size-limit",
         "test": "pnpm lint && pnpm test-ci",

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;
     }
 

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();
+    }
+  }
+};