diff --git a/.gitignore b/.gitignore index a03307d82..bf69bd2c6 100644 --- a/.gitignore +++ b/.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 diff --git a/README.md b/README.md index ff9076d8f..6aa4f2822 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,9 @@ GitHub Workflow Status Coverage Awesome - Slack + Slack +

+ Chart.js 4.0 - Open source JavaScript charting library for the modern web | Product Hunt

## Documentation diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 7420bd6b5..cb8577c95 100644 --- a/docs/.vuepress/config.ts +++ b/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' } ] } diff --git a/docs/developers/contributing.md b/docs/developers/contributing.md index 6efd3bd1a..1310eda41 100644 --- a/docs/developers/contributing.md +++ b/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 diff --git a/docs/general/colors.md b/docs/general/colors.md index 20d2459f3..f2b4c8d78 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/docs/getting-started/usage.md b/docs/getting-started/usage.md index acb65cc74..94e186d66 100644 --- a/docs/getting-started/usage.md +++ b/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! \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 736c55d41..b280c9a59 100644 --- a/docs/index.md +++ b/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 diff --git a/docs/migration/v3-migration.md b/docs/migration/v3-migration.md index 129ee08c0..a456e3fe5 100644 --- a/docs/migration/v3-migration.md +++ b/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: diff --git a/package.json b/package.json index 01b903096..4c5ccae6f 100644 --- a/package.json +++ b/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", diff --git a/src/plugins/plugin.colors.ts b/src/plugins/plugin.colors.ts index 14292ca6c..b2817c85a 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 000000000..9969d3e2a --- /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 000000000..38f281077 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 000000000..404d63068 --- /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 000000000..58121e43f Binary files /dev/null and b/test/fixtures/plugin.colors/dynamic-datasets-force-override.png differ