diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index d83b5f663..000000000
--- a/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ["@babel/preset-env", "@babel/preset-react"],
- "plugins": ["@babel/plugin-proposal-class-properties"]
-}
\ No newline at end of file
diff --git a/.circleci/config.yml b/.circleci/config.yml
deleted file mode 100644
index c517509da..000000000
--- a/.circleci/config.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-
-version: 2.1
-orbs:
- node: circleci/node@1.1.6
-jobs:
- build-and-test:
- executor:
- name: node/default
- steps:
- - checkout
- - node/with-cache:
- steps:
- - run: yarn
- - run: npm test
-workflows:
- build-and-test:
- jobs:
- - build-and-test
\ No newline at end of file
diff --git a/.clean-publish b/.clean-publish
new file mode 100644
index 000000000..b1c46691e
--- /dev/null
+++ b/.clean-publish
@@ -0,0 +1,6 @@
+{
+ "withoutPublish": true,
+ "tempDir": "package",
+ "fields": ["tsd"],
+ "files": ["website"]
+}
diff --git a/.commitlintrc.json b/.commitlintrc.json
new file mode 100644
index 000000000..23e264859
--- /dev/null
+++ b/.commitlintrc.json
@@ -0,0 +1,6 @@
+{
+ "extends": ["@commitlint/config-conventional"],
+ "rules": {
+ "body-max-line-length": [0]
+ }
+}
diff --git a/.czrc b/.czrc
new file mode 100644
index 000000000..11f040658
--- /dev/null
+++ b/.czrc
@@ -0,0 +1,3 @@
+{
+ "path": "@commitlint/cz-commitlint"
+}
diff --git a/.editorconfig b/.editorconfig
index 64b9f5b18..115381d32 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,11 +8,4 @@ charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
-
-[*.json]
-indent_style = space
indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false
-indent_style = tab
diff --git a/.eslintignore b/.eslintignore
index 200b8e9f4..77660d0d9 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,4 @@
.publish/*
dist/*
-example/dist/*
lib/*
node_modules/*
diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 3c94e6336..000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,31 +0,0 @@
-{
- "parser": "babel-eslint",
- "env": {
- "browser": true,
- "node": true
- },
- "plugins": [
- "react"
- ],
- "rules": {
- "curly": [2, "multi-line"],
- "quotes": [2, "single", "avoid-escape"],
- "react/display-name": 0,
- "react/jsx-boolean-value": 1,
- "react/jsx-quotes": 1,
- "react/jsx-no-undef": 1,
- "react/jsx-sort-props": 0,
- "react/jsx-sort-prop-types": 1,
- "react/jsx-uses-react": 1,
- "react/jsx-uses-vars": 1,
- "react/no-did-mount-set-state": 1,
- "react/no-did-update-set-state": 1,
- "react/no-unknown-property": 1,
- "react/prop-types": 1,
- "react/react-in-jsx-scope": 1,
- "react/self-closing-comp": 1,
- "react/wrap-multilines": 1,
- "semi": 2,
- "strict": 0
- }
-}
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..48cb1bcb8
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,47 @@
+{
+ "parser": "@typescript-eslint/parser",
+ "plugins": ["@typescript-eslint", "prettier"],
+ "extends": [
+ "standard",
+ "standard-react",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:prettier/recommended"
+ ],
+ "env": {
+ "browser": true
+ },
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "ecmaFeatures": {
+ "jsx": true
+ }
+ },
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ },
+ "rules": {
+ "curly": [2, "multi-line"],
+ "quotes": [2, "single", "avoid-escape"],
+ "react/display-name": 0,
+ "react/jsx-boolean-value": 1,
+ "jsx-quotes": [1, "prefer-single"],
+ "react/jsx-no-undef": 1,
+ "react/jsx-sort-props": 0,
+ "react/jsx-uses-react": 1,
+ "react/jsx-uses-vars": 1,
+ "react/no-did-mount-set-state": 1,
+ "react/no-did-update-set-state": 1,
+ "react/no-unknown-property": 1,
+ "react/prop-types": 0,
+ "react/react-in-jsx-scope": 0,
+ "react/self-closing-comp": 1,
+ "semi": [2, "always"],
+ "strict": 0,
+ "no-use-before-define": 0,
+ "@typescript-eslint/no-use-before-define": 2,
+ "@typescript-eslint/consistent-type-imports": "error",
+ "@typescript-eslint/no-import-type-side-effects": "error"
+ }
+}
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
new file mode 100644
index 000000000..50c6b6497
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -0,0 +1,56 @@
+name: "🐛 Bug Report"
+description: "If something isn't working as expected."
+title: "[Bug]: "
+labels: ["bug"]
+body:
+ - type: markdown
+ attributes:
+ value: Thanks for taking the time to file a bug report! Please fill out this form as completely as possible.
+
+ - type: markdown
+ attributes:
+ value: ⚠️ react-chartjs-2 is just the wrapper around Chart.js, so if you are experiencing an issue with charts rendering, please create a related issue in [Chart.js repository](https://github.com/chartjs/Chart.js/issues).
+
+ - type: checkboxes
+ id: input1
+ attributes:
+ label: Would you like to work on a fix?
+ options:
+ - label: Check this if you would like to implement a PR, we are more than happy to help you go through the process.
+
+ - type: textarea
+ attributes:
+ label: Current and expected behavior
+ description: A clear and concise description of what the library is doing and what you would expect.
+ validations:
+ required: true
+
+ - type: input
+ attributes:
+ label: Reproduction
+ description: |
+ Please provide issue reproduction.
+ You can give a link to a repository with the reproduction or make a fork of [this sandbox](https://codesandbox.io/s/github/reactchartjs/react-chartjs-2/tree/master/sandboxes/chart/ref) and reproduce the issue there.
+ validations:
+ required: true
+
+ - type: input
+ attributes:
+ label: chart.js version
+ description: Which version of `chart.js` are you using?
+ placeholder: v0.0.0
+ validations:
+ required: true
+
+ - type: input
+ attributes:
+ label: react-chartjs-2 version
+ description: Which version of `react-chartjs-2` are you using?
+ placeholder: v0.0.0
+ validations:
+ required: true
+
+ - type: textarea
+ attributes:
+ label: Possible solution
+ description: If you have suggestions on a fix for the bug.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 000000000..e5262ce3c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,9 @@
+
+blank_issues_enabled: false
+contact_links:
+ - name: 🤔 Have a Question?
+ url: https://stackoverflow.com/questions/tagged/react-chartjs-2
+ about: Feel free to ask questions on Stack Overflow.
+ - name: 📊 Have a Problem With Chart.js?
+ url: https://github.com/chartjs/Chart.js/issues
+ about: react-chartjs-2 is just the wrapper around Chart.js, so if you are experiencing an issue with charts rendering, please create a related issue in Chart.js repository.
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
new file mode 100644
index 000000000..fbefc69b1
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -0,0 +1,44 @@
+name: "🚀 Feature Request"
+description: "I have a specific suggestion!"
+labels: ["enhancement"]
+body:
+ - type: markdown
+ attributes:
+ value: Thanks for taking the time to suggest a new feature! Please fill out this form as completely as possible.
+
+ - type: markdown
+ attributes:
+ value: ⚠️ react-chartjs-2 is just the wrapper around Chart.js, so if you are experiencing an issue with charts rendering, please create a related issue in [Chart.js repository](https://github.com/chartjs/Chart.js/issues).
+
+ - type: checkboxes
+ id: input1
+ attributes:
+ label: Would you like to work on this feature?
+ options:
+ - label: Check this if you would like to implement a PR, we are more than happy to help you go through the process.
+
+ - type: textarea
+ attributes:
+ label: What problem are you trying to solve?
+ description: |
+ A concise description of what the problem is.
+ placeholder: |
+ I have an issue when [...]
+ validations:
+ required: true
+
+ - type: textarea
+ attributes:
+ label: Describe the solution you'd like
+ validations:
+ required: true
+
+ - type: textarea
+ attributes:
+ label: Describe alternatives you've considered
+
+ - type: textarea
+ attributes:
+ label: Documentation, Adoption, Migration Strategy
+ description: |
+ If you can, explain how users will be able to use this and how it might be documented. Maybe a mock-up?
diff --git a/.github/renovate.json b/.github/renovate.json
new file mode 100644
index 000000000..5fcce1121
--- /dev/null
+++ b/.github/renovate.json
@@ -0,0 +1,6 @@
+{
+ "extends": [
+ "config:base",
+ ":preserveSemverRanges"
+ ]
+}
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
new file mode 100644
index 000000000..817394d66
--- /dev/null
+++ b/.github/workflows/checks.yml
@@ -0,0 +1,97 @@
+name: Checks
+on:
+ pull_request:
+ branches:
+ - master
+jobs:
+ size:
+ runs-on: ubuntu-latest
+ name: size-limit
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Install pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+ - name: Install Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: 22
+ cache: 'pnpm'
+ - name: Check size
+ uses: andresz1/size-limit-action@master
+ with:
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+ typings:
+ runs-on: ubuntu-latest
+ name: typings
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Install pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+ - name: Install Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: 22
+ cache: 'pnpm'
+ - name: Install dependencies
+ run: pnpm install
+ - name: Prebuild
+ run: pnpm build
+ - name: Check typings
+ if: success()
+ run: pnpm test:typings
+ storybook:
+ runs-on: ubuntu-latest
+ name: storybook
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Install pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+ - name: Install Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: 22
+ cache: 'pnpm'
+ - name: Install dependencies
+ run: pnpm install
+ - name: Check storybook
+ run: pnpm build:storybook
+ editorconfig:
+ runs-on: ubuntu-latest
+ name: editorconfig
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Check editorconfig
+ uses: editorconfig-checker/action-editorconfig-checker@main
+ website:
+ runs-on: ubuntu-latest
+ name: website
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Install pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+ - name: Install Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: 22
+ cache: 'pnpm'
+ - name: Install dependencies
+ run: pnpm install
+ - name: Install website dependencies
+ run: pnpm install
+ working-directory: ./website
+ - name: Check website
+ run: pnpm build
+ working-directory: ./website
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 000000000..cd100ca38
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,33 @@
+name: CI
+on:
+ pull_request:
+ push:
+ branches:
+ - master
+jobs:
+ test:
+ runs-on: ubuntu-latest
+ name: Tests
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Install pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+ - name: Install Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: 22
+ cache: 'pnpm'
+ - name: Install dependencies
+ run: pnpm install
+ - name: Run tests
+ run: pnpm test
+ - name: Collect coverage
+ uses: codecov/codecov-action@v5
+ if: success()
+ with:
+ token: ${{ secrets.CODECOV_TOKEN }}
+ files: ./coverage/lcov.info
+ fail_ci_if_error: true
diff --git a/.github/workflows/commit.yml b/.github/workflows/commit.yml
new file mode 100644
index 000000000..ead140059
--- /dev/null
+++ b/.github/workflows/commit.yml
@@ -0,0 +1,14 @@
+name: Commit
+on:
+ push:
+jobs:
+ commitlint:
+ runs-on: ubuntu-latest
+ name: commitlint
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ with:
+ fetch-depth: 0
+ - name: Run commitlint
+ uses: wagoid/commitlint-github-action@v6
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 000000000..405a77c7b
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,62 @@
+name: Release
+on:
+ issue_comment:
+ types: [created, deleted]
+ push:
+ branches:
+ - master
+jobs:
+ check:
+ runs-on: ubuntu-latest
+ name: Context check
+ outputs:
+ continue: ${{ steps.check.outputs.continue }}
+ workflow: ${{ steps.check.outputs.workflow }}
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Context check
+ id: check
+ uses: trigensoftware/simple-release-action@latest
+ with:
+ workflow: check
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ pull-request:
+ runs-on: ubuntu-latest
+ name: Pull request
+ needs: check
+ if: needs.check.outputs.workflow == 'pull-request'
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Create or update pull request
+ uses: trigensoftware/simple-release-action@latest
+ with:
+ workflow: pull-request
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ release:
+ runs-on: ubuntu-latest
+ name: Release
+ needs: check
+ if: needs.check.outputs.workflow == 'release'
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Install pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+ - name: Install Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: 22
+ cache: 'pnpm'
+ registry-url: 'https://registry.npmjs.org/'
+ - name: Install dependencies
+ run: pnpm install
+ - name: Release
+ uses: trigensoftware/simple-release-action@latest
+ with:
+ workflow: release
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ npm-token: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
new file mode 100644
index 000000000..2a7f1f210
--- /dev/null
+++ b/.github/workflows/website.yml
@@ -0,0 +1,59 @@
+name: Website
+on:
+ push:
+ branches:
+ - master
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+# Allow one concurrent deployment
+concurrency:
+ group: "pages"
+ cancel-in-progress: true
+jobs:
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ name: deploy website
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v5
+ - name: Install pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+ - name: Install Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: 22
+ cache: 'pnpm'
+ - name: Install dependencies
+ run: pnpm install
+ - name: Install website dependencies
+ run: pnpm install
+ working-directory: ./website
+ - name: Install sandbox dependencies
+ run: pnpm install
+ working-directory: ./sandboxes
+ - name: Build sandboxes
+ run: pnpm build
+ working-directory: ./sandboxes
+ - name: Copy sandbox examples to website
+ run: node sandboxes.js
+ working-directory: ./website
+ - name: Build website
+ run: pnpm build
+ working-directory: ./website
+ - name: Setup Pages
+ uses: actions/configure-pages@v5
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v4
+ with:
+ path: './website/build'
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
index 7c9268859..3d4834a18 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,36 +1,19 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/ignore-files/ for more about ignoring files.
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Coverage tools
-lib-cov
-coverage
-coverage.html
-.cover*
-
-# Dependency directory
+# dependencies
node_modules
-# Build directories
-lib
+# builds
+package
dist
-es
+storybook-static
-# Example build directory
-example/dist
-.publish
+# misc
+.DS_Store
+.env
+.env.*
-# Editor and other tmp files
-*.swp
-*.un~
-*.iml
-*.ipr
-*.iws
-*.sublime-*
-.idea/
-*.DS_Store
+npm-debug.log*
+
+# testing
+coverage
diff --git a/.nano-staged.json b/.nano-staged.json
new file mode 100644
index 000000000..ea3e5b55c
--- /dev/null
+++ b/.nano-staged.json
@@ -0,0 +1,3 @@
+{
+ "**/*.{js,ts,tsx}": ["prettier --write", "eslint"]
+}
diff --git a/.npmignore b/.npmignore
deleted file mode 100644
index 790f045b6..000000000
--- a/.npmignore
+++ /dev/null
@@ -1,8 +0,0 @@
-.storybook
-example
-src
-.editorconfig
-.eslintignore
-.eslintrc
-rollup.config.js
-.babelrc
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 000000000..319e41e69
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+strict-peer-dependencies=false
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..6aa1e09bd
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+ "singleQuote": true,
+ "jsxSingleQuote": true,
+ "semi": true,
+ "tabWidth": 2,
+ "bracketSpacing": true,
+ "arrowParens": "avoid",
+ "trailingComma": "es5"
+}
diff --git a/.simple-git-hooks.json b/.simple-git-hooks.json
new file mode 100644
index 000000000..06e40b963
--- /dev/null
+++ b/.simple-git-hooks.json
@@ -0,0 +1,5 @@
+{
+ "commit-msg": "pnpm commitlint --edit \"$1\"",
+ "pre-commit": "pnpm nano-staged",
+ "pre-push": "pnpm test"
+}
diff --git a/.simple-release.json b/.simple-release.json
new file mode 100644
index 000000000..21c8bb48b
--- /dev/null
+++ b/.simple-release.json
@@ -0,0 +1,12 @@
+{
+ "project": "@simple-release/pnpm#PnpmProject",
+ "releaser": {
+ "verbose": true
+ },
+ "pullRequest": {
+ "draft": true
+ },
+ "publish": {
+ "access": "public"
+ }
+}
diff --git a/.size-limit.json b/.size-limit.json
new file mode 100644
index 000000000..2030a6030
--- /dev/null
+++ b/.size-limit.json
@@ -0,0 +1,13 @@
+[
+ {
+ "path": "dist/index.js",
+ "limit": "1.4 KB",
+ "webpack": false,
+ "running": false
+ },
+ {
+ "path": "dist/index.js",
+ "limit": "590 B",
+ "import": "{ Chart }"
+ }
+]
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 000000000..6ade63c25
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,25 @@
+const path = require('path');
+const { mergeConfig } = require('vite');
+
+module.exports = {
+ viteFinal(config) {
+ return mergeConfig(config, {
+ resolve: {
+ alias: {
+ 'react-chartjs-2': path.resolve(__dirname, '../src'),
+ },
+ },
+ });
+ },
+ stories: ['../stories/*.tsx'],
+ addons: [
+ '@storybook/addon-docs',
+ '@storybook/addon-controls',
+ '@storybook/addon-actions',
+ ],
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
+ },
+ docs: {},
+};
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 000000000..6ff995f8a
--- /dev/null
+++ b/.storybook/manager.js
@@ -0,0 +1,8 @@
+import { addons } from '@storybook/manager-api';
+
+import { theme } from './theme';
+
+addons.setConfig({
+ theme,
+ panelPosition: 'right',
+});
diff --git a/.storybook/package.json b/.storybook/package.json
new file mode 100644
index 000000000..5bbefffba
--- /dev/null
+++ b/.storybook/package.json
@@ -0,0 +1,3 @@
+{
+ "type": "commonjs"
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 000000000..0578373f4
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,5 @@
+import { configureActions } from '@storybook/addon-actions';
+
+configureActions({
+ depth: 5,
+});
diff --git a/.storybook/theme.js b/.storybook/theme.js
new file mode 100644
index 000000000..2090225be
--- /dev/null
+++ b/.storybook/theme.js
@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming';
+
+export const theme = create({
+ base: 'light',
+ brandTitle: 'react-chartjs-2',
+ brandUrl: 'https://github.com/reactchartjs/react-chartjs-2',
+});
diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 000000000..2ca86fc64
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1,2 @@
+nodejs 22.4.1
+pnpm 10.19.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 000000000..f22796653
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,177 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## [5.3.1](https://github.com/reactchartjs/react-chartjs-2/compare/v5.3.0...v5.3.1) (2025-10-27)
+
+### Bug Fixes
+
+* **deps:** update dependency @algolia/client-search to v5 ([#1298](https://github.com/reactchartjs/react-chartjs-2/issues/1298)) ([03e88f2](https://github.com/reactchartjs/react-chartjs-2/commit/03e88f2f29eea21cbbaa898cc95cdfc993f4d3f7))
+* **deps:** update dependency @svgr/webpack to v8 ([#1299](https://github.com/reactchartjs/react-chartjs-2/issues/1299)) ([ca87f1f](https://github.com/reactchartjs/react-chartjs-2/commit/ca87f1f4b71b2ca01d63bcf9da29a2a1839eac02))
+* **deps:** update dependency clsx to v2 ([#1300](https://github.com/reactchartjs/react-chartjs-2/issues/1300)) ([0cd985b](https://github.com/reactchartjs/react-chartjs-2/commit/0cd985b0d4f8011d3820716d80dffb96cc2a1441))
+* **deps:** update react monorepo ([#1281](https://github.com/reactchartjs/react-chartjs-2/issues/1281)) ([cb2a0cd](https://github.com/reactchartjs/react-chartjs-2/commit/cb2a0cd3237b7d1631e8f72c4d036629a392864b))
+* **deps:** update react monorepo to v19 ([#1317](https://github.com/reactchartjs/react-chartjs-2/issues/1317)) ([2445433](https://github.com/reactchartjs/react-chartjs-2/commit/2445433d4749a8ff6fad82a73f23693ccd93d783))
+* use jsx-runtime ([#1309](https://github.com/reactchartjs/react-chartjs-2/issues/1309)) ([b3bd707](https://github.com/reactchartjs/react-chartjs-2/commit/b3bd707cdcf7793454775365468973f7ed795beb))
+
+## [5.3.0](https://github.com/reactchartjs/react-chartjs-2/compare/v5.2.0...v5.3.0) (2025-01-01)
+
+
+### Features
+
+* support react 19 ([#1236](https://github.com/reactchartjs/react-chartjs-2/issues/1236)) ([055b601](https://github.com/reactchartjs/react-chartjs-2/commit/055b601f22da8aac8c04a37cba16d48d8e4914ee))
+
+
+### Bug Fixes
+
+* docs typo ([#1202](https://github.com/reactchartjs/react-chartjs-2/issues/1202)) ([65b68c6](https://github.com/reactchartjs/react-chartjs-2/commit/65b68c6cf177fb98636876af3b0b96ffcd0ce483))
+
+## [5.2.0](https://github.com/reactchartjs/react-chartjs-2/compare/v5.1.0...v5.2.0) (2023-01-09)
+
+
+### Features
+
+* restore compatability with webpack 4 ([#1146](https://github.com/reactchartjs/react-chartjs-2/issues/1146)) ([082c26d](https://github.com/reactchartjs/react-chartjs-2/commit/082c26d559f210af7c55c31a826fe4821a429700))
+
+## [5.1.0](https://github.com/reactchartjs/react-chartjs-2/compare/v5.0.1...v5.1.0) (2022-12-19)
+
+
+### Features
+
+* restore CommonJS bundle ([#1137](https://github.com/reactchartjs/react-chartjs-2/issues/1137)) ([7db2643](https://github.com/reactchartjs/react-chartjs-2/commit/7db264337200c999bc987e0e288df08ef7813ee3))
+
+### [5.0.1](https://github.com/reactchartjs/react-chartjs-2/compare/v5.0.0...v5.0.1) (2022-11-17)
+
+
+### Bug Fixes
+
+* remove chart.js v3 from peer dependencies ([7ae5702](https://github.com/reactchartjs/react-chartjs-2/commit/7ae57023783f4c64210119f0447bd1c0e1ba92e9))
+
+## [5.0.0](https://github.com/reactchartjs/react-chartjs-2/compare/v4.3.1...v5.0.0) (2022-11-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* no commonjs support
+
+### Features
+
+* chart.js v4 support ([#1109](https://github.com/reactchartjs/react-chartjs-2/issues/1109)) ([deb2110](https://github.com/reactchartjs/react-chartjs-2/commit/deb211084757225e3ddb2574b567e805ba7eeeb6))
+* package type module ([#1108](https://github.com/reactchartjs/react-chartjs-2/issues/1108)) ([6eb8ce7](https://github.com/reactchartjs/react-chartjs-2/commit/6eb8ce7f23654e46d17aedc104375112b2f2a955))
+
+
+### Bug Fixes
+
+* **deps:** update dependency chart.js to v4 ([#1104](https://github.com/reactchartjs/react-chartjs-2/issues/1104)) ([6192408](https://github.com/reactchartjs/react-chartjs-2/commit/61924087de28a7ee0bba6f61c50a0bde362b662c))
+* **deps:** update dependency react-scripts to v5.0.1 ([#1049](https://github.com/reactchartjs/react-chartjs-2/issues/1049)) ([38a9796](https://github.com/reactchartjs/react-chartjs-2/commit/38a9796f1cefa63390d4eaf3eec960c77fe78d34))
+* **deps:** update react monorepo to v18 ([#1031](https://github.com/reactchartjs/react-chartjs-2/issues/1031)) ([ad73425](https://github.com/reactchartjs/react-chartjs-2/commit/ad734256e173353222995b4edfbf7a8ad0dc96f3))
+* **deps:** update react monorepo to v18.2.0 ([#1082](https://github.com/reactchartjs/react-chartjs-2/issues/1082)) ([72e7352](https://github.com/reactchartjs/react-chartjs-2/commit/72e7352fcdff182465bfdcd6a7f6c4579d062d01))
+* **site:** [#1076](https://github.com/reactchartjs/react-chartjs-2/issues/1076) expand the docusaurus container content to give the sandboxes more space ([#1077](https://github.com/reactchartjs/react-chartjs-2/issues/1077)) ([b512e8d](https://github.com/reactchartjs/react-chartjs-2/commit/b512e8dc130e28c1284be77d4ef6c3a788b9e262))
+
+### [4.3.1](https://github.com/reactchartjs/react-chartjs-2/compare/v4.3.0...v4.3.1) (2022-07-13)
+
+
+### Bug Fixes
+
+* update options without resetting chart ([#1061](https://github.com/reactchartjs/react-chartjs-2/issues/1061)) ([fa0a4bb](https://github.com/reactchartjs/react-chartjs-2/commit/fa0a4bbdb3d85735db289494c4bdf1da083a51da))
+
+## [4.3.0](https://github.com/reactchartjs/react-chartjs-2/compare/v4.2.0...v4.3.0) (2022-07-12)
+
+
+### Features
+
+* assure redraw occurs when type changes ([#1054](https://github.com/reactchartjs/react-chartjs-2/issues/1054)) ([#1055](https://github.com/reactchartjs/react-chartjs-2/issues/1055)) ([bf0538f](https://github.com/reactchartjs/react-chartjs-2/commit/bf0538fd953ee878659d0b5647676fbfda460c76))
+
+## [4.2.0](https://github.com/reactchartjs/react-chartjs-2/compare/v4.1.0...v4.2.0) (2022-06-07)
+
+
+### Features
+
+* implement passing updateMode property to chart's update method ([#1043](https://github.com/reactchartjs/react-chartjs-2/issues/1043)) ([96d2714](https://github.com/reactchartjs/react-chartjs-2/commit/96d2714c3df88346152a1b66b8fe729d43151e40))
+
+## [4.1.0](https://github.com/reactchartjs/react-chartjs-2/compare/v4.0.1...v4.1.0) (2022-04-07)
+
+
+### Features
+
+* react 18 support ([#1034](https://github.com/reactchartjs/react-chartjs-2/issues/1034)) ([058035a](https://github.com/reactchartjs/react-chartjs-2/commit/058035a3e2da17ad9ee0c9f50793da3aaefb3913))
+
+### [4.0.1](https://github.com/reactchartjs/react-chartjs-2/compare/v4.0.0...v4.0.1) (2022-01-19)
+
+
+### Bug Fixes
+
+* compatability with react 16 typings ([#987](https://github.com/reactchartjs/react-chartjs-2/issues/987)) ([4a01054](https://github.com/reactchartjs/react-chartjs-2/commit/4a010540ac01b1e4b299705ddd93f412df4875d1)), closes [#870](https://github.com/reactchartjs/react-chartjs-2/issues/870)
+* **deps:** update dependency @svgr/webpack to v6 ([#999](https://github.com/reactchartjs/react-chartjs-2/issues/999)) ([7611ebd](https://github.com/reactchartjs/react-chartjs-2/commit/7611ebdbdbf4e91991b1a15d393fbadf2de01246))
+* **deps:** update dependency react-scripts to v5 ([#1001](https://github.com/reactchartjs/react-chartjs-2/issues/1001)) ([3936227](https://github.com/reactchartjs/react-chartjs-2/commit/3936227b4e6865bbd20419af4a5b0b49561f608c))
+* **deps:** update docusaurus monorepo to v2.0.0-beta.14 ([#994](https://github.com/reactchartjs/react-chartjs-2/issues/994)) ([2a24ee9](https://github.com/reactchartjs/react-chartjs-2/commit/2a24ee92203c703d16c3784eccb0011b5b870802))
+
+## [4.0.0](https://github.com/reactchartjs/react-chartjs-2/compare/v3.3.0...v4.0.0) (2021-11-22)
+
+
+### ⚠ BREAKING CHANGES
+
+* getDatasetAtEvent, getElementAtEvent and getElementsAtEvent props are removed,
+utils with the same names can used instead
+* New target browsers: ie 11 dropped for regular bundle, modern bundle builds for
+browsers with es6 modules support.
+* Functional data prop is removed
+* Added support of tree-shaking of Chart.js. Now you should register Chart.js
+components by yourself.
+* default export is renamed to Chart
+* Chart.js re-exports are removed
+
+### Features
+
+* datasetIdKey prop ([#848](https://github.com/reactchartjs/react-chartjs-2/issues/848)) ([f895766](https://github.com/reactchartjs/react-chartjs-2/commit/f895766f012c0d3781d75b5f83adc6dbc8de0b03))
+
+
+* default export is renamed to Chart ([#836](https://github.com/reactchartjs/react-chartjs-2/issues/836)) ([131daa0](https://github.com/reactchartjs/react-chartjs-2/commit/131daa008d3a3c280ba9e751c67ca926708b60e4))
+* functional data prop is removed ([#840](https://github.com/reactchartjs/react-chartjs-2/issues/840)) ([b64dfb0](https://github.com/reactchartjs/react-chartjs-2/commit/b64dfb0430bf5817a5f8b8708551934ad426921e))
+* getDatasetAtEvent, getElementAtEvent and getElementsAtEvent props are removed ([#845](https://github.com/reactchartjs/react-chartjs-2/issues/845)) ([6a9b2a7](https://github.com/reactchartjs/react-chartjs-2/commit/6a9b2a7527d23e7409c9273ad32eb100122ffb51))
+* new target browsers ([#841](https://github.com/reactchartjs/react-chartjs-2/issues/841)) ([b1e83db](https://github.com/reactchartjs/react-chartjs-2/commit/b1e83db599e7f9b832c2fe1942b5e5f296730dd9))
+* removed chart.js re-exports ([#835](https://github.com/reactchartjs/react-chartjs-2/issues/835)) ([30d5c2d](https://github.com/reactchartjs/react-chartjs-2/commit/30d5c2d457eae0b1142ea4ffb6eff8f583b60817))
+* tree-shaking ([#839](https://github.com/reactchartjs/react-chartjs-2/issues/839)) ([fcd2849](https://github.com/reactchartjs/react-chartjs-2/commit/fcd2849037bb01d2eeadbfbc90c90054eb620d4c))
+
+## [3.3.0](https://github.com/reactchartjs/react-chartjs-2/compare/v3.2.0...v3.3.0) (2021-10-26)
+
+
+### Features
+
+* export chart props types ([#810](https://github.com/reactchartjs/react-chartjs-2/issues/810)) ([82ab334](https://github.com/reactchartjs/react-chartjs-2/commit/82ab334c62939fb4924ed6021502fccfea29a5a2)), closes [#720](https://github.com/reactchartjs/react-chartjs-2/issues/720)
+
+
+### Bug Fixes
+
+* data updating fix ([#807](https://github.com/reactchartjs/react-chartjs-2/issues/807)) ([45a50cc](https://github.com/reactchartjs/react-chartjs-2/commit/45a50cc46196ce64088a463b6f3b384a6c98eb06)), closes [#806](https://github.com/reactchartjs/react-chartjs-2/issues/806)
+
+## [3.2.0](https://github.com/reactchartjs/react-chartjs-2/compare/v3.1.1...v3.2.0) (2021-10-21)
+
+
+### Features
+
+* remove lodash ([#784](https://github.com/reactchartjs/react-chartjs-2/issues/784)) ([5594170](https://github.com/reactchartjs/react-chartjs-2/commit/559417024ef2fb34005727ff16d8fae8615cb071))
+
+
+### Bug Fixes
+
+* improve and fix rerendering ([#790](https://github.com/reactchartjs/react-chartjs-2/issues/790)) ([330fb1c](https://github.com/reactchartjs/react-chartjs-2/commit/330fb1cf0913bdbacda5ef755fb58c79482e1ea2))
+* multitype chart typings ([#792](https://github.com/reactchartjs/react-chartjs-2/issues/792)) ([2f19eb3](https://github.com/reactchartjs/react-chartjs-2/commit/2f19eb3eba9681f383ca23e7a3a1f1c581c89061))
+
+### [3.1.1](https://github.com/reactchartjs/react-chartjs-2/compare/v3.1.0...v3.1.1) (2021-10-19)
+
+
+### Bug Fixes
+
+* components' props types ([#782](https://github.com/reactchartjs/react-chartjs-2/issues/782)) ([eba8a27](https://github.com/reactchartjs/react-chartjs-2/commit/eba8a2794bb802dacc395a450110af8765fea868)), closes [#734](https://github.com/reactchartjs/react-chartjs-2/issues/734) [#741](https://github.com/reactchartjs/react-chartjs-2/issues/741)
+
+## [3.1.0](https://github.com/reactchartjs/react-chartjs-2/compare/v2.4.0...v3.1.0) (2021-10-17)
+
+
+### Features
+
+* Reduced package size
+
+
+### Bug Fixes
+
+* minor types fixes ([#759](https://github.com/reactchartjs/react-chartjs-2/issues/759)) ([fe6c00f](https://github.com/reactchartjs/react-chartjs-2/commit/fe6c00f05cdc3099a66a7ac0c05fb5e6f216209a))
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 000000000..3aa4f7570
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,7 @@
+Copyright 2020 Jeremy Ayerst
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
index 73f39bfd3..d6a5ff76d 100644
--- a/README.md
+++ b/README.md
@@ -1,235 +1,73 @@
-[](https://travis-ci.org/jerairrest/react-chartjs-2)
-[](https://www.npmjs.com/package/react-chartjs-2)
-[](https://npm-stat.com/charts.html?package=react-chartjs-2&from=2016-01-01)
-[](http://opensource.org/licenses/MIT)
-
-### Looking for maintainers!!
-
# react-chartjs-2
-React wrapper for [Chart.js 2](http://www.chartjs.org/docs/#getting-started)
-Open for PRs and contributions!
-
-# UPDATE to 2.x
-As of 2.x we have made chart.js a peer dependency for greater flexibility. Please add chart.js as a dependency on your project to use 2.x. Currently, 2.5.x is the recommended version of chart.js to use.
-
-## Demo & Examples
+
-Live demo: [jerairrest.github.io/react-chartjs-2](http://jerairrest.github.io/react-chartjs-2/)
+React components for Chart.js, the most popular charting library.
-To build the examples locally, run:
-
-```bash
-npm install
-npm start
-```
+Supports Chart.js v4 and v3.
-Then open [`localhost:8000`](http://localhost:8000) in a browser.
+[![NPM version][npm]][npm-url]
+[![Downloads][downloads]][downloads-url]
+[![Build status][build]][build-url]
+[![Coverage status][coverage]][coverage-url]
+[![Bundle size][size]][size-url]
-## Demo & Examples via React Storybook
+[npm]: https://img.shields.io/npm/v/react-chartjs-2.svg
+[npm-url]: https://www.npmjs.com/package/react-chartjs-2
-We have to build the package, then you can run storybook.
+[downloads]: https://img.shields.io/npm/dm/react-chartjs-2.svg
+[downloads-url]: https://www.npmjs.com/package/react-chartjs-2
-```bash
-npm run build
-npm run storybook
-```
+[build]: https://img.shields.io/github/actions/workflow/status/reactchartjs/react-chartjs-2/ci.yml?branch=master
+[build-url]: https://github.com/reactchartjs/react-chartjs-2/actions
-Then open [`localhost:6006`](http://localhost:6006) in a browser.
+[coverage]: https://img.shields.io/codecov/c/github/reactchartjs/react-chartjs-2.svg
+[coverage-url]: https://app.codecov.io/gh/reactchartjs/react-chartjs-2
+[size]: https://img.shields.io/bundlephobia/minzip/react-chartjs-2
+[size-url]: https://bundlephobia.com/package/react-chartjs-2
-## Installation via NPM
+
+Quickstart
+ •
+Docs
+ •
+Stack Overflow
+
+
-```bash
-npm install --save react-chartjs-2 chart.js
-```
+## Quickstart
-## Installation via YARN
+Install this library with peer dependencies:
```bash
+pnpm add react-chartjs-2 chart.js
+# or
yarn add react-chartjs-2 chart.js
+# or
+npm i react-chartjs-2 chart.js
```
+We recommend using `chart.js@^4.0.0`.
-## Usage
+Then, import and use individual components:
-Check example/src/components/* for usage.
-
-```js
+```jsx
import { Doughnut } from 'react-chartjs-2';
```
-### Properties
-
-* data: (PropTypes.object | PropTypes.func).isRequired,
-* width: PropTypes.number,
-* height: PropTypes.number,
-* id: PropTypes.string,
-* legend: PropTypes.object,
-* options: PropTypes.object,
-* redraw: PropTypes.bool,
-* getDatasetAtEvent: PropTypes.func,
-* getElementAtEvent: PropTypes.func,
-* getElementsAtEvent: PropTypes.func
-* onElementsClick: PropTypes.func, // alias for getElementsAtEvent (backward compatibility)
-
-### Custom size
-In order for Chart.js to obey the custom size you need to set `maintainAspectRatio` to false, example:
-
-```js
-
-```
-
-### Chart.js instance
-Chart.js instance can be accessed by placing a ref to the element as:
-
-```js
-class MyComponent extends React.Component {
- constructor(props) {
- super(props);
- this.chartReference = React.createRef();
- }
-
- componentDidMount() {
- console.log(this.chartReference); // returns a Chart.js instance reference
- }
-
- render() {
- return ()
- }
-}
-```
-
-### Getting context for data generation
-Canvas node and hence context, that can be used to create CanvasGradient background,
-is passed as argument to data if given as function:
-
-This approach is useful when you want to keep your components pure.
-
-```js
-render() {
- const data = (canvas) => {
- const ctx = canvas.getContext("2d")
- const gradient = ctx.createLinearGradient(0,0,100,0);
- ...
- return {
- ...
- backgroundColor: gradient
- ...
- }
- }
-
- return ()
-}
-```
-
-### Chart.js Defaults
-Chart.js defaults can be set by importing the `defaults` object:
-
-```javascript
-import { defaults } from 'react-chartjs-2';
-
-// Disable animating charts by default.
-defaults.global.animation = false;
-```
-
-If you want to bulk set properties, try using the [lodash.merge](https://lodash.com/docs/#merge) function. This function will do a deep recursive merge preserving previously set values that you don't want to update.
-
-```js
-import { defaults } from 'react-chartjs-2';
-import merge from 'lodash.merge';
-// or
-// import { merge } from 'lodash';
-
-merge(defaults, {
- global: {
- animation: false,
- line: {
- borderColor: '#F85F73',
- },
- },
-});
-```
-
-### Chart.js object
-
-You can access the internal Chart.js object to register plugins or extend charts like this:
-
-```JavaScript
-import { Chart } from 'react-chartjs-2';
-
-componentWillMount() {
- Chart.pluginService.register({
- afterDraw: function (chart, easing) {
- // Plugin code.
- }
- });
-}
-```
-
-### Scatter Charts
-
-If you're using Chart.js 2.6 and below, add the `showLines: false` property to your chart options. This was later [added](https://github.com/chartjs/Chart.js/commit/7fa60523599a56255cde78a49e848166bd233c6e) in the default config, so users of later versions would not need to do this extra step.
-
-### Events
-
-#### onElementsClick || getElementsAtEvent (function)
-
-A function to be called when mouse clicked on chart elememts, will return all element at that point as an array. [Check](https://github.com/chartjs/Chart.js/blob/master/docs/docs/developers/api.md#getelementsatevente)
-
-```js
-{
- onElementsClick: (elems) => {},
- getElementsAtEvent: (elems) => {},
- // `elems` is an array of chartElements
-}
-
-```
-#### getElementAtEvent (function)
-
-Calling getElementAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the single element at the event position. If there are multiple items within range, only the first is returned [Check](https://github.com/chartjs/Chart.js/blob/master/docs/docs/developers/api.md#getelementatevente)
-
-```js
-{
- getElementAtEvent: (elems) => {},
- // => returns the first element at the event point.
-}
-```
-
-#### getDatasetAtEvent (function)
-
-Looks for the element under the event point, then returns all elements from that dataset. This is used internally for 'dataset' mode highlighting [Check](https://github.com/chartjs/Chart.js/blob/master/docs/docs/developers/api.md#getdatasetatevente)
-
-```js
-{
- getDatasetAtEvent: (dataset) => {}
- // `dataset` is an array of chartElements
-}
-```
-
-### Working with Multiple Datasets
-
-You will find that any event which causes the chart to re-render, such as hover tooltips, etc., will cause the first dataset to be copied over to other datasets, causing your lines and bars to merge together. This is because to track changes in the dataset series, the library needs a `key` to be specified - if none is found, it can't tell the difference between the datasets while updating. To get around this issue, you can take these two approaches:
-
-1. Add a `label` property on each dataset. By default, this library uses the `label` property as the key to distinguish datasets.
-2. Specify a different property to be used as a key by passing a `datasetKeyProvider` prop to your chart component, which would return a unique string value for each dataset.
-
-## Development (`src`, `lib` and the build process)
-
-**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
-
-To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).
+## Docs
+- [Migration to v4](https://react-chartjs-2.js.org/docs/migration-to-v4)
+- [Working with datasets](https://react-chartjs-2.js.org/docs/working-with-datasets)
+- [Working with events](https://react-chartjs-2.js.org/docs/working-with-events)
+- [FAQ](https://react-chartjs-2.js.org/faq)
+- [Components](https://react-chartjs-2.js.org/components)
+- [Examples](https://react-chartjs-2.js.org/examples)
## License
-[MIT Licensed](/LICENSE.md)
-Copyright (c) 2017 Jeremy Ayerst
-
+[MIT Licensed](LICENSE)
+Copyright (c) 2020 Jeremy Ayerst
diff --git a/example/rollup.config.js b/example/rollup.config.js
deleted file mode 100644
index 142509b6b..000000000
--- a/example/rollup.config.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import htmlTemplate from "rollup-plugin-generate-html-template";
-import resolve from "@rollup/plugin-node-resolve";
-import babel from "@rollup/plugin-babel";
-import commonjs from "@rollup/plugin-commonjs";
-import replace from "@rollup/plugin-replace";
-import alias from "@rollup/plugin-alias";
-import path from "path";
-
-const pathResolve = (loc) => path.resolve(__dirname, loc);
-
-export default {
- input: pathResolve("src/index.js"),
- output: {
- file: pathResolve("dist/js/bundle.js"),
- },
- plugins: [
- htmlTemplate({
- template: pathResolve("src/index.html"),
- target: pathResolve("dist/index.html"),
- }),
- resolve(),
- babel({
- babelHelpers: "bundled",
- exclude: "**/node_modules/**",
- }),
- commonjs(),
- replace({
- "process.env.NODE_ENV": JSON.stringify("development"),
- }),
- alias({
- entries: [{ find: "react-chartjs-2", replacement: "../../../src" }],
- }),
- ],
-};
diff --git a/example/src/components/app.js b/example/src/components/app.js
deleted file mode 100644
index b50b0ac5a..000000000
--- a/example/src/components/app.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-
-import DoughnutExample from './doughnut';
-import DynamicDoughnutExample from './dynamic-doughnut';
-import PieExample from './pie';
-import LineExample from './line';
-import BarExample from './bar';
-import HorizontalBarExample from './horizontalBar';
-import RadarExample from './radar';
-import PolarExample from './polar';
-import BubbleExample from './bubble';
-import ScatterExample from './scatter';
-import MixedDataExample from './mix';
-import RandomizedDataLineExample from './randomizedLine';
-import CrazyDataLineExample from './crazyLine';
-import LegendOptionsExample from './legend-options';
-import LegendHandlersExample from './legend-handlers';
-
-export default class App extends React.Component {
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Bar Example (custom size)
-
-
- );
- }
-});
diff --git a/example/src/components/bubble.js b/example/src/components/bubble.js
deleted file mode 100644
index f4e45c92a..000000000
--- a/example/src/components/bubble.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import {Bubble} from 'react-chartjs-2';
-
-const data = {
- labels: ['January'],
- datasets: [
- {
- label: 'My First dataset',
- fill: false,
- lineTension: 0.1,
- backgroundColor: 'rgba(75,192,192,0.4)',
- borderColor: 'rgba(75,192,192,1)',
- borderCapStyle: 'butt',
- borderDash: [],
- borderDashOffset: 0.0,
- borderJoinStyle: 'miter',
- pointBorderColor: 'rgba(75,192,192,1)',
- pointBackgroundColor: '#fff',
- pointBorderWidth: 1,
- pointHoverRadius: 5,
- pointHoverBackgroundColor: 'rgba(75,192,192,1)',
- pointHoverBorderColor: 'rgba(220,220,220,1)',
- pointHoverBorderWidth: 2,
- pointRadius: 1,
- pointHitRadius: 10,
- data: [{x:10,y:20,r:5}]
- }
- ]
-};
-
-export default React.createClass({
- displayName: 'BubbleExample',
-
- render() {
- return (
-
-
Bubble Example
-
-
- );
- }
-});
diff --git a/example/src/components/crazyLine.js b/example/src/components/crazyLine.js
deleted file mode 100644
index 5384edd21..000000000
--- a/example/src/components/crazyLine.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import {Bar} from 'react-chartjs-2';
-import color from 'rcolor';
-
-const initialState = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(255,99,132,0.2)',
- borderColor: 'rgba(255,99,132,1)',
- borderWidth: 1,
- hoverBackgroundColor: 'rgba(255,99,132,0.4)',
- hoverBorderColor: 'rgba(255,99,132,1)',
- data: [65, 59, 80, 81, 56, 55, 40]
- }
- ]
-};
-
-
-
-const Graph = React.createClass({
- displayName: 'Graph',
- componentWillMount(){
- this.setState(initialState);
- },
- componentDidMount(){
-
- var _this = this;
-
- setInterval(function(){
- var oldDataSet = _this.state.datasets[0];
- var newData = [];
-
- for(var x=0; x< _this.state.labels.length; x++){
- newData.push(Math.floor(Math.random() * 100));
- }
-
- var newDataSet = {
- ...oldDataSet
- };
-
- newDataSet.data = newData;
- newDataSet.backgroundColor = color();
- newDataSet.borderColor = color();
- newDataSet.hoverBackgroundColor = color();
- newDataSet.hoverBorderColor = color();
-
- var newState = {
- ...initialState,
- datasets: [newDataSet]
- };
-
- _this.setState(newState);
- }, 5000);
- },
- render() {
- return (
-
- );
- }
-});
-
-
-
-
-export default React.createClass({
- displayName: 'Crazy Random Graph',
-
- render() {
- return (
-
-
You can even make crazy graphs like this!
-
-
- );
- }
-});
diff --git a/example/src/components/doughnut.js b/example/src/components/doughnut.js
deleted file mode 100644
index 2bc7ac7ce..000000000
--- a/example/src/components/doughnut.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import {Doughnut} from 'react-chartjs-2';
-
-const data = {
- labels: [
- 'Red',
- 'Green',
- 'Yellow'
- ],
- datasets: [{
- data: [300, 50, 100],
- backgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56'
- ],
- hoverBackgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56'
- ]
- }]
-};
-
-export default React.createClass({
- displayName: 'DoughnutExample',
-
- render() {
- return (
-
-
Doughnut Example
-
-
- );
- }
-});
diff --git a/example/src/components/dynamic-doughnut.js b/example/src/components/dynamic-doughnut.js
deleted file mode 100644
index 1506a0d77..000000000
--- a/example/src/components/dynamic-doughnut.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import {Doughnut} from 'react-chartjs-2';
-
-function getRandomInt (min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-const getState = () => ({
- labels: [
- 'Red',
- 'Green',
- 'Yellow'
- ],
- datasets: [{
- data: [getRandomInt(50, 200), getRandomInt(100, 150), getRandomInt(150, 250)],
- backgroundColor: [
- '#CCC',
- '#36A2EB',
- '#FFCE56'
- ],
- hoverBackgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56'
- ]
- }]
-});
-
-export default React.createClass({
- displayName: 'DynamicDoughnutExample',
-
- getInitialState() {
- return getState();
- },
-
- componentWillMount() {
- setInterval(() => {
- this.setState(getState());
- }, 5000);
- },
-
- render() {
- return (
-
-
Dynamicly refreshed Doughnut Example
-
-
- );
- }
-});
diff --git a/example/src/components/horizontalBar.js b/example/src/components/horizontalBar.js
deleted file mode 100644
index 4f36ec535..000000000
--- a/example/src/components/horizontalBar.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import {HorizontalBar} from 'react-chartjs-2';
-
-const data = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(255,99,132,0.2)',
- borderColor: 'rgba(255,99,132,1)',
- borderWidth: 1,
- hoverBackgroundColor: 'rgba(255,99,132,0.4)',
- hoverBorderColor: 'rgba(255,99,132,1)',
- data: [65, 59, 80, 81, 56, 55, 40]
- }
- ]
-};
-
-export default React.createClass({
- displayName: 'BarExample',
-
- render() {
- return (
-
-
Horizontal Bar Example
-
-
- );
- }
-});
diff --git a/example/src/components/legend-handlers.js b/example/src/components/legend-handlers.js
deleted file mode 100644
index 2ef957160..000000000
--- a/example/src/components/legend-handlers.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {Pie} from 'react-chartjs-2';
-
-const data = {
- labels: [
- 'Red',
- 'Green',
- 'Yellow'
- ],
- datasets: [{
- data: [300, 50, 100],
- backgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56'
- ],
- hoverBackgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56'
- ]
- }]
-};
-
-const legendOpts = {
- onClick: (e, item) => alert(`Item with text ${item.text} and index ${item.index} clicked`),
- onHover: (e, item) => alert(`Item with text ${item.text} and index ${item.index} hovered`),
-};
-
-export default React.createClass({
- displayName: 'LegendExample',
-
- getInitialState() {
- return {
- legend: legendOpts
- }
- },
-
- applyLegendSettings() {
- const { value } = this.legendOptsInput;
-
- try {
- const opts = JSON.parse(value);
- this.setState({
- legend: opts
- });
- } catch(e) {
- alert(e.message);
- throw Error(e);
- }
- },
-
- render() {
- return (
-
-
Legend Handlers Example
-
Hover over label and click
-
-
-
Legend Options Example
-
-
-
-
-
-
-
Line Example
-
-
- );
- }
-});
diff --git a/example/src/components/mix.js b/example/src/components/mix.js
deleted file mode 100644
index 902d97d87..000000000
--- a/example/src/components/mix.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import {Bar} from 'react-chartjs-2';
-
-const data = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [{
- label: 'Sales',
- type:'line',
- data: [51, 65, 40, 49, 60, 37, 40],
- fill: false,
- borderColor: '#EC932F',
- backgroundColor: '#EC932F',
- pointBorderColor: '#EC932F',
- pointBackgroundColor: '#EC932F',
- pointHoverBackgroundColor: '#EC932F',
- pointHoverBorderColor: '#EC932F',
- yAxisID: 'y-axis-2'
- },{
- type: 'bar',
- label: 'Visitor',
- data: [200, 185, 590, 621, 250, 400, 95],
- fill: false,
- backgroundColor: '#71B37C',
- borderColor: '#71B37C',
- hoverBackgroundColor: '#71B37C',
- hoverBorderColor: '#71B37C',
- yAxisID: 'y-axis-1'
- }]
-};
-
-const options = {
- responsive: true,
- tooltips: {
- mode: 'label'
- },
- elements: {
- line: {
- fill: false
- }
- },
- scales: {
- xAxes: [
- {
- display: true,
- gridLines: {
- display: false
- },
- labels: {
- show: true
- }
- }
- ],
- yAxes: [
- {
- type: 'linear',
- display: true,
- position: 'left',
- id: 'y-axis-1',
- gridLines: {
- display: false
- },
- labels: {
- show: true
- }
- },
- {
- type: 'linear',
- display: true,
- position: 'right',
- id: 'y-axis-2',
- gridLines: {
- display: false
- },
- labels: {
- show: true
- }
- }
- ]
- }
-};
-
-const plugins = [{
- afterDraw: (chartInstance, easing) => {
- const ctx = chartInstance.chart.ctx;
- ctx.fillText("This text drawn by a plugin", 100, 100);
- }
-}];
-
-export default React.createClass({
- displayName: 'MixExample',
-
- render() {
- return (
-
-
Mixed data Example
-
-
- );
- }
-});
diff --git a/example/src/components/pie.js b/example/src/components/pie.js
deleted file mode 100644
index 12587b7d9..000000000
--- a/example/src/components/pie.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import {Pie} from 'react-chartjs-2';
-
-const data = {
- labels: [
- 'Red',
- 'Blue',
- 'Yellow'
- ],
- datasets: [{
- data: [300, 50, 100],
- backgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56'
- ],
- hoverBackgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56'
- ]
- }]
-};
-
-export default React.createClass({
- displayName: 'PieExample',
-
- render() {
- return (
-
- );
- }
-});
diff --git a/example/src/components/polar.js b/example/src/components/polar.js
deleted file mode 100644
index b60a07195..000000000
--- a/example/src/components/polar.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import {Polar} from 'react-chartjs-2';
-
-const data = {
- datasets: [{
- data: [
- 11,
- 16,
- 7,
- 3,
- 14
- ],
- backgroundColor: [
- '#FF6384',
- '#4BC0C0',
- '#FFCE56',
- '#E7E9ED',
- '#36A2EB'
- ],
- label: 'My dataset' // for legend
- }],
- labels: [
- 'Red',
- 'Green',
- 'Yellow',
- 'Grey',
- 'Blue'
- ]
-};
-
-export default React.createClass({
- displayName: 'PolarExample',
-
- render() {
- return (
-
- );
- }
-});
diff --git a/example/src/components/radar.js b/example/src/components/radar.js
deleted file mode 100644
index 14e4d580f..000000000
--- a/example/src/components/radar.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import {Radar} from 'react-chartjs-2';
-
-const data = {
- labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(179,181,198,0.2)',
- borderColor: 'rgba(179,181,198,1)',
- pointBackgroundColor: 'rgba(179,181,198,1)',
- pointBorderColor: '#fff',
- pointHoverBackgroundColor: '#fff',
- pointHoverBorderColor: 'rgba(179,181,198,1)',
- data: [65, 59, 90, 81, 56, 55, 40]
- },
- {
- label: 'My Second dataset',
- backgroundColor: 'rgba(255,99,132,0.2)',
- borderColor: 'rgba(255,99,132,1)',
- pointBackgroundColor: 'rgba(255,99,132,1)',
- pointBorderColor: '#fff',
- pointHoverBackgroundColor: '#fff',
- pointHoverBorderColor: 'rgba(255,99,132,1)',
- data: [28, 48, 40, 19, 96, 27, 100]
- }
- ]
-};
-
-export default React.createClass({
- displayName: 'RadarExample',
-
- render() {
- return (
-
-
Radar Example
-
-
- );
- }
-});
diff --git a/example/src/components/randomizedLine.js b/example/src/components/randomizedLine.js
deleted file mode 100644
index e653dd693..000000000
--- a/example/src/components/randomizedLine.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import {Line} from 'react-chartjs-2';
-
-const initialState = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'My First dataset',
- fill: false,
- lineTension: 0.1,
- backgroundColor: 'rgba(75,192,192,0.4)',
- borderColor: 'rgba(75,192,192,1)',
- borderCapStyle: 'butt',
- borderDash: [],
- borderDashOffset: 0.0,
- borderJoinStyle: 'miter',
- pointBorderColor: 'rgba(75,192,192,1)',
- pointBackgroundColor: '#fff',
- pointBorderWidth: 1,
- pointHoverRadius: 5,
- pointHoverBackgroundColor: 'rgba(75,192,192,1)',
- pointHoverBorderColor: 'rgba(220,220,220,1)',
- pointHoverBorderWidth: 2,
- pointRadius: 1,
- pointHitRadius: 10,
- data: [65, 59, 80, 81, 56, 55, 40]
- }
- ]
-};
-
-
-
-const Graph = React.createClass({
- displayName: 'Graph',
- componentWillMount(){
- this.setState(initialState);
- },
- componentDidMount(){
-
- var _this = this;
-
- setInterval(function(){
- var oldDataSet = _this.state.datasets[0];
- var newData = [];
-
- for(var x=0; x< _this.state.labels.length; x++){
- newData.push(Math.floor(Math.random() * 100));
- }
-
- var newDataSet = {
- ...oldDataSet
- };
-
- newDataSet.data = newData;
-
- var newState = {
- ...initialState,
- datasets: [newDataSet]
- };
-
- _this.setState(newState);
- }, 5000);
- },
- render() {
- return (
-
- );
- }
-});
-
-
-
-
-export default React.createClass({
- displayName: 'RandomizedDataLineExample',
-
- render() {
- return (
-
-
Random Animated Line Example
-
-
- );
- }
-});
diff --git a/example/src/components/scatter.js b/example/src/components/scatter.js
deleted file mode 100644
index 3f5d14187..000000000
--- a/example/src/components/scatter.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import {Scatter} from 'react-chartjs-2';
-
-const data = {
- labels: ['Scatter'],
- datasets: [
- {
- label: 'My First dataset',
- fill: false,
- backgroundColor: 'rgba(75,192,192,0.4)',
- pointBorderColor: 'rgba(75,192,192,1)',
- pointBackgroundColor: '#fff',
- pointBorderWidth: 1,
- pointHoverRadius: 5,
- pointHoverBackgroundColor: 'rgba(75,192,192,1)',
- pointHoverBorderColor: 'rgba(220,220,220,1)',
- pointHoverBorderWidth: 2,
- pointRadius: 1,
- pointHitRadius: 10,
- data: [
- { x: 65, y: 75 },
- { x: 59, y: 49 },
- { x: 80, y: 90 },
- { x: 81, y: 29 },
- { x: 56, y: 36 },
- { x: 55, y: 25 },
- { x: 40, y: 18 },
- ]
- }
- ]
-};
-
-export default React.createClass({
- displayName: 'ScatterExample',
-
- render() {
- return (
-
-
Scatter Example
-
-
- );
- }
-});
diff --git a/example/src/index.html b/example/src/index.html
deleted file mode 100644
index dabade27c..000000000
--- a/example/src/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
- react-chartjs-2
-
-
-
-
-
-
react-chartjs-2
-
-
-
-
-
-
-
-
+ {datasets.map(({ value, color }, i) => (
+ -
+ {value}
+
+ ))}
+
+
+ );
+};
diff --git a/stories/PolarArea.stories.tsx b/stories/PolarArea.stories.tsx
new file mode 100644
index 000000000..fe619a0e8
--- /dev/null
+++ b/stories/PolarArea.stories.tsx
@@ -0,0 +1,21 @@
+import 'chart.js/auto';
+import { PolarArea } from '../src';
+import { data } from '../sandboxes/polarArea/default/App';
+
+export default {
+ title: 'Components/PolarArea',
+ component: PolarArea,
+ parameters: {
+ layout: 'centered',
+ },
+ args: {
+ width: 500,
+ height: 400,
+ },
+};
+
+export const Default = args => ;
+
+Default.args = {
+ data,
+};
diff --git a/stories/Radar.stories.tsx b/stories/Radar.stories.tsx
new file mode 100644
index 000000000..dab64f28f
--- /dev/null
+++ b/stories/Radar.stories.tsx
@@ -0,0 +1,21 @@
+import 'chart.js/auto';
+import { Radar } from '../src';
+import { data } from '../sandboxes/radar/default/App';
+
+export default {
+ title: 'Components/Radar',
+ component: Radar,
+ parameters: {
+ layout: 'centered',
+ },
+ args: {
+ width: 500,
+ height: 400,
+ },
+};
+
+export const Default = args => ;
+
+Default.args = {
+ data,
+};
diff --git a/stories/Scatter.stories.tsx b/stories/Scatter.stories.tsx
new file mode 100644
index 000000000..14cde1c84
--- /dev/null
+++ b/stories/Scatter.stories.tsx
@@ -0,0 +1,22 @@
+import 'chart.js/auto';
+import { Scatter } from '../src';
+import { data, options } from '../sandboxes/scatter/default/App';
+
+export default {
+ title: 'Components/Scatter',
+ component: Scatter,
+ parameters: {
+ layout: 'centered',
+ },
+ args: {
+ width: 500,
+ height: 400,
+ },
+};
+
+export const Default = args => ;
+
+Default.args = {
+ data,
+ options,
+};
diff --git a/stories/StockExamples.js b/stories/StockExamples.js
deleted file mode 100644
index 2473779ed..000000000
--- a/stories/StockExamples.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { storiesOf, action, linkTo } from '@kadira/storybook';
-
-// all of the "stock" stand-alone examples
-import DoughnutExample from '../example/src/components/doughnut';
-import DynamicDoughnutExample from '../example/src/components/dynamic-doughnut';
-import PieExample from '../example/src/components/pie';
-import LineExample from '../example/src/components/line';
-import BarExample from '../example/src/components/bar';
-import HorizontalBarExample from '../example/src/components/horizontalBar';
-import RadarExample from '../example/src/components/radar';
-import PolarExample from '../example/src/components/polar';
-import MixedDataExample from '../example/src/components/mix';
-
-storiesOf('Doughnut Example', module)
- .add('Basic Example', () => (
-
- ));
-storiesOf('DynamicDoughnut Example', module)
- .add('Basic Example', () => (
-
- ));
-storiesOf('Pie Example', module)
- .add('Basic Example', () => (
-
- ));
-storiesOf('Line Example', module)
- .add('Basic Example', () => (
-
- ));
-storiesOf('Bar Example', module)
- .add('Basic Example', () => (
-
- ));
-storiesOf('HorizontalBar Example', module)
- .add('Basic Example', () => (
-
- ));
-storiesOf('Radar Example', module)
- .add('Basic Example', () => (
-
- ));
-storiesOf('Polar Example', module)
- .add('Basic Example', () => (
-
- ));
-storiesOf('Polar Example', module)
- .add('Basic Example', () => (
-
- ));
-
-
diff --git a/stories/UpdatingChart.js b/stories/UpdatingChart.js
deleted file mode 100644
index 7817a3b29..000000000
--- a/stories/UpdatingChart.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import React from 'react';
-import { Bar } from 'react-chartjs-2';
-import { storiesOf } from '@kadira/storybook';
-
-const srcData = [
- {
- year: 2015,
- data: [
- 536531,
- 1017273,
- 1496702,
- 1882366,
- 2228939,
- 2515784,
- 2753399,
- 2966478,
- 3236838,
- 3613068,
- 4047828,
- 4547209
- ],
- color: 'hsla(50,100%,59.21569%,1)'
- },
- {
- year: 2016,
- data: [
- 551503,
- 1057792,
- 1521903,
- 1908192,
- 2191201,
- 2412114,
- 2634171,
- 2900548,
- 3159543,
- 3552987,
- 4052115,
- 4553624
- ],
- color: 'hsla(104,46.15384%,54.11765%,1)'
- },
- {
- year: 2017,
- data: [
- 546988,
- 1031054,
- 1526958,
- 1929360,
- 2219497,
- 2472468,
- 2654013,
- 2876660,
- 3125501,
- 3464636,
- 3911575,
- 3976944
- ],
- color: 'hsla(191,100%,36.66667%,1)'
- }
-];
-
-const options = {
- responsive: true,
- tooltips: {
- mode: 'label'
- },
- elements: {
- line: {
- fill: false,
- lineTension: 0
- }
- },
- scales: {
- yAxes: [
- {
- tics: { min: 0 }
- }
- ]
- },
- legend: {
- display: true,
- position: 'bottom',
- reverse: true,
- onClick: null
- }
-};
-
-storiesOf('Updating chart Example', module).add('Line & Bar', () => {
- const labels = [
- 'January',
- 'February',
- 'March',
- 'April',
- 'May',
- 'June',
- 'July',
- 'August',
- 'September',
- 'October',
- 'November',
- 'December'
- ];
-
- const Chart = ({ data }) => {
- const config = {
- labels: labels,
- datasets: data.map((series, idx, arr) => {
- let { year, data, color } = series;
- return {
- id: year,
- type: idx < arr.length - 1 ? 'line' : 'bar',
- label: year,
- data: data,
- backgroundColor: color,
- borderColor: color
- };
- })
- };
- return ;
- };
-
- class SelectAndChart extends React.Component {
- constructor() {
- super();
- this.state = { data: srcData.map(s => ({ ...s, selected: true })) };
- }
-
- toggleYear(year) {
- this.setState(state => {
- return {
- data: state.data.map(s => ({
- ...s,
- selected: year === s.year ? !s.selected : s.selected
- }))
- };
- });
- }
-
- render() {
- return (
-
- series.selected)} />
-
-
- );
- }
- }
-
- const Select = ({ data, toggle }) => {
- return (
-
- {data.map(({ year, selected }) => (
-
-
-
-
- ))}
-
-
React wrapper for Chart.js
-
- Use the links on the left to see variations of usage, with different props.
-
-
- See also
- Examples
- Code
-
-
Fallback content
;
+ const { getByTestId } = render(
+
+ );
+
+ expect(chart).toBeTruthy();
+ expect(chart.canvas).toContainElement(getByTestId('fallbackContent'));
+ });
+
+ it('should pass through aria labels to the canvas element', () => {
+ const ariaLabel = 'ARIA LABEL';
+ render(
+
+ );
+
+ expect(chart.canvas.getAttribute('aria-label')).toBe(ariaLabel);
+ });
+
+ it('should rerender datasets with same labels', () => {
+ const getData = () => ({
+ labels: [1, 2, 3],
+ datasets: [
+ {
+ label: '',
+ data: [5, 6, 7],
+ },
+ {
+ label: '',
+ data: [3, 2, 1],
+ },
+ ],
+ });
+
+ const { rerender } = render(
+
+ );
+
+ const [prevDataset1, prevDataset2] = chart.config.data.datasets;
+
+ rerender();
+
+ const [nextDataset1, nextDataset2] = chart.config.data.datasets;
+
+ expect(prevDataset1).toBe(nextDataset1);
+ expect(prevDataset2).not.toBe(nextDataset2);
+ });
+
+ it('should rerender datasets with id', () => {
+ const getData = () => ({
+ labels: [1, 2, 3],
+ datasets: [
+ {
+ id: 1,
+ label: '',
+ data: [5, 6, 7],
+ },
+ {
+ id: 2,
+ label: '',
+ data: [3, 2, 1],
+ },
+ ],
+ });
+
+ const { rerender } = render(
+
+ );
+
+ const [prevDataset1, prevDataset2] = chart.config.data.datasets;
+
+ rerender(
+
+ );
+
+ const [nextDataset1, nextDataset2] = chart.config.data.datasets;
+
+ expect(prevDataset1).toBe(nextDataset1);
+ expect(prevDataset2).toBe(nextDataset2);
+ });
+
+ it('should pass updateMode prop to update method', () => {
+ const newData = {
+ labels: ['purple', 'pink'],
+ datasets: [{ label: 'new-colors', data: [1, 10] }],
+ };
+
+ const { rerender } = render(
+
+ );
+
+ rerender(
+
+ );
+
+ expect(update).toHaveBeenCalledTimes(1);
+ expect(update).toBeCalledWith('active');
+ });
+});
diff --git a/test/config/setup.js b/test/config/setup.js
deleted file mode 100644
index e09d46920..000000000
--- a/test/config/setup.js
+++ /dev/null
@@ -1,27 +0,0 @@
-require('@babel/register')();
-
-var canvas = require('canvas');
-
-const jsdom = require('jsdom');
-
-const { window } = new jsdom.JSDOM(``, { url: 'https://localhost/' });
-
-const canvasMethods = [
- 'HTMLCanvasElement',
-];
-
-Object.keys(window).forEach(property => {
- if (typeof global[property] === 'undefined') {
- global[property] = window[property];
- }
-});
-
-canvasMethods.forEach(method =>
- global[method] = window[method]
-);
-
-global['CanvasRenderingContext2D'] = canvas.Context2d;
-
-global.navigator = {
- userAgent: 'node.js'
-};
diff --git a/test/setup.ts b/test/setup.ts
new file mode 100644
index 000000000..64b6cbf0e
--- /dev/null
+++ b/test/setup.ts
@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom/vitest';
+
+import 'vitest-canvas-mock';
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..c97513678
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,37 @@
+{
+ "compilerOptions": {
+ /* Type Checking */
+ "strict": true,
+ "strictBindCallApply": true,
+ "noFallthroughCasesInSwitch": true,
+ "noImplicitOverride": true,
+ "noImplicitReturns": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ /* Modules */
+ "baseUrl": ".",
+ "module": "NodeNext",
+ "moduleResolution": "NodeNext",
+ "resolveJsonModule": true,
+ /* Emit */
+ "declaration": true,
+ "declarationMap": true,
+ "inlineSourceMap": true,
+ "outDir": "dist",
+ /* Interop Constraints */
+ "allowSyntheticDefaultImports": true,
+ "isolatedModules": true,
+ /* Language and Environment */
+ "jsx": "preserve",
+ "lib": [
+ "dom",
+ "esnext"
+ ],
+ "target": "ESNext",
+ /* Completeness */
+ "skipLibCheck": true
+ },
+ "include": [
+ "src"
+ ]
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 000000000..a66b74121
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+ plugins: [react()],
+ test: {
+ environment: 'happy-dom',
+ setupFiles: ['test/setup.ts'],
+ server: {
+ deps: {
+ inline: ['vitest-canvas-mock'],
+ },
+ },
+ coverage: {
+ reporter: ['lcovonly', 'text'],
+ include: ['src/**/*'],
+ },
+ },
+});
diff --git a/website/.gitignore b/website/.gitignore
new file mode 100644
index 000000000..62b05e210
--- /dev/null
+++ b/website/.gitignore
@@ -0,0 +1,16 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+static/sandboxes
+
+# Misc
+.DS_Store
+.env.*
+
+npm-debug.log*
diff --git a/website/CNAME b/website/CNAME
new file mode 100644
index 000000000..6f8279972
--- /dev/null
+++ b/website/CNAME
@@ -0,0 +1 @@
+react-chartjs-2.js.org
diff --git a/website/README.md b/website/README.md
new file mode 100644
index 000000000..0e97a2ea6
--- /dev/null
+++ b/website/README.md
@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ pnpm install
+```
+
+### Local Development
+
+```
+$ pnpm start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ pnpm build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER= USE_SSH=true pnpm deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
diff --git a/website/babel.config.js b/website/babel.config.js
new file mode 100644
index 000000000..e00595dae
--- /dev/null
+++ b/website/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
diff --git a/website/docs/chartjs-v2.mdx b/website/docs/chartjs-v2.mdx
new file mode 100644
index 000000000..5947525d4
--- /dev/null
+++ b/website/docs/chartjs-v2.mdx
@@ -0,0 +1,67 @@
+---
+slug: /docs/chartjs-v2
+description: Using react-chartjs-2 with Chart.js v2
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Using with Chart.js v2
+
+If your app needs [Chart.js v2](https://www.chartjs.org/docs/2.9.4/), please use a [compatible version](https://www.npmjs.com/package/react-chartjs-2/v/2.11.2) of this library:
+
+
+
+
+ ```bash
+ yarn add chart.js@^2.9.4 react-chartjs-2@^2.11.2
+ ```
+
+
+
+
+ ```bash
+ pnpm add chart.js@^2.9.4 react-chartjs-2@^2.11.2
+ ```
+
+
+
+
+ ```bash
+ npm install --save chart.js@^2.9.4 react-chartjs-2@^2.11.2
+ ```
+
+
+
+
+Also, please consider upgrading your app to [Chart.js v3](#upgrading-to-chartjs-v3).
+
+## Upgrading to Chart.js v3
+
+First, upgrade packages. You'll need to install Chart.js v3 and the latest version of this library:
+
+
+
+
+ ```bash
+ yarn add chart.js@^3.6.0 react-chartjs-2@^4.0.0
+ ```
+
+
+
+
+ ```bash
+ pnpm add chart.js@^3.6.0 react-chartjs-2@^4.0.0
+ ```
+
+
+
+
+ ```bash
+ npm install --save chart.js@^3.6.0 react-chartjs-2@^4.0.0
+ ```
+
+
+
+
+Then, please follow the [this guide](/docs/migration-to-v4).
diff --git a/website/docs/chartjs-v3.mdx b/website/docs/chartjs-v3.mdx
new file mode 100644
index 000000000..87f310030
--- /dev/null
+++ b/website/docs/chartjs-v3.mdx
@@ -0,0 +1,67 @@
+---
+slug: /docs/chartjs-v3
+description: Using react-chartjs-2 with Chart.js v3
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Using with Chart.js v3
+
+If your app needs [Chart.js v3](https://www.chartjs.org/docs/3.9.1/), please use a [compatible version](https://www.npmjs.com/package/react-chartjs-2/v/4.3.1) of this library:
+
+
+
+
+ ```bash
+ yarn add chart.js@^3.9.1 react-chartjs-2@^4.3.1
+ ```
+
+
+
+
+ ```bash
+ pnpm add chart.js@^3.9.1 react-chartjs-2@^4.3.1
+ ```
+
+
+
+
+ ```bash
+ npm install --save chart.js@^3.9.1 react-chartjs-2@^4.3.1
+ ```
+
+
+
+
+Also, please consider upgrading your app to [Chart.js v4](#upgrading-to-chartjs-v4).
+
+## Upgrading to Chart.js v4
+
+First, upgrade packages. You'll need to install Chart.js v3 and the latest version of this library:
+
+
+
+
+ ```bash
+ yarn add chart.js@^4.0.0 react-chartjs-2@^5.0.0
+ ```
+
+
+
+
+ ```bash
+ pnpm add chart.js@^4.0.0 react-chartjs-2@^5.0.0
+ ```
+
+
+
+
+ ```bash
+ npm install --save chart.js@^4.0.0 react-chartjs-2@^5.0.0
+ ```
+
+
+
+
+Then, please follow the [this guide](/docs/migration-to-v5).
diff --git a/website/docs/components/bar.mdx b/website/docs/components/bar.mdx
new file mode 100644
index 000000000..9d279786c
--- /dev/null
+++ b/website/docs/components/bar.mdx
@@ -0,0 +1,29 @@
+---
+description: Description of Bar component from react-chartjs-2.
+tags:
+ - Bar Chart
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# Bar
+
+## Usage
+
+```jsx
+import { Bar } from 'react-chartjs-2';
+
+
+```
+
+[See full usage examples.](/tags/bar-chart)
+
+## Props
+
+Also supports all standard `