From baba8e3e6f4b2b7d9a8c7b8e51cc698af23b972f Mon Sep 17 00:00:00 2001
From: Vyacheslav Terekhov <thabarbados@gmail.com>
Date: Mon, 21 Feb 2022 12:33:39 +0400
Subject: [PATCH] feat: chart.js 3.0 support (#754)

BREAKING CHANGE: upgrade to Chart.js 3.0
---
 .github/workflows/checks.yml                  |  28 +
 .size-limit                                   |  24 +
 package.json                                  |  12 +-
 pnpm-lock.yaml                                | 596 +++++++++++++++++-
 sandboxes/bar/package.json                    |   2 +-
 sandboxes/bar/src/components/barChart.vue     |  11 +
 sandboxes/bubble/package.json                 |   2 +-
 .../bubble/src/components/bubbleChart.vue     |  10 +
 sandboxes/custom/package.json                 |   2 +-
 .../custom/src/components/customChart.vue     |  37 +-
 sandboxes/doughnut/package.json               |   2 +-
 .../doughnut/src/components/doughnutChart.vue |  10 +
 sandboxes/horizontal-bar/index.html           |  11 -
 sandboxes/horizontal-bar/index.js             |   6 -
 sandboxes/horizontal-bar/package.json         |   8 -
 sandboxes/horizontal-bar/src/App.vue          |  14 -
 .../src/components/horizontalBarChart.vue     |  46 --
 .../src/components/horizontalBarPage.vue      |  47 --
 sandboxes/line/package.json                   |   2 +-
 sandboxes/line/src/components/lineChart.vue   |  10 +
 sandboxes/pie/package.json                    |   2 +-
 sandboxes/pie/src/components/pieChart.vue     |  10 +
 sandboxes/polar-area/package.json             |   2 +-
 .../src/components/polarAreaChart.vue         |  10 +
 sandboxes/radar/package.json                  |   2 +-
 sandboxes/radar/src/components/radarChart.vue |  10 +
 sandboxes/reactive-prop/package.json          |   2 +-
 .../src/components/reactivePropChart.vue      |  11 +
 sandboxes/reactive/package.json               |   2 +-
 .../reactive/src/components/reactiveChart.vue |  11 +
 sandboxes/scatter/package.json                |   2 +-
 .../scatter/src/components/scatterChart.vue   |  10 +
 src/BaseCharts.js                             | 106 +++-
 src/index.js                                  |   3 -
 stories/horizontalBar.stories.js              |  24 -
 test/Bar.spec.js                              |  25 +-
 test/Bubble.spec.js                           |  24 +-
 test/Doughnut.spec.js                         |  24 +-
 test/HorizontalBar.spec.js                    |  74 ---
 test/Line.spec.js                             |  24 +-
 test/Pie.spec.js                              |  24 +-
 test/PolarArea.spec.js                        |  24 +-
 test/Radar.spec.js                            |  24 +-
 test/Scatter.spec.js                          |  24 +-
 test/examples/BarChart.vue                    |  11 +
 test/examples/BubbleChart.vue                 |  11 +
 test/examples/CustomChart.vue                 |  37 +-
 test/examples/DoughnutChart.vue               |  10 +
 test/examples/HorizontalBarChart.vue          |  41 --
 test/examples/LineChart.vue                   |  10 +
 test/examples/PieChart.vue                    |  10 +
 test/examples/PolarAreaChart.vue              |  10 +
 test/examples/RadarChart.vue                  |  10 +
 test/examples/ReactiveChart.vue               |  11 +
 test/examples/ReactivePropChart.vue           |  11 +
 test/examples/ScatterChart.vue                |  10 +
 56 files changed, 1037 insertions(+), 499 deletions(-)
 create mode 100644 .github/workflows/checks.yml
 create mode 100644 .size-limit
 delete mode 100644 sandboxes/horizontal-bar/index.html
 delete mode 100644 sandboxes/horizontal-bar/index.js
 delete mode 100644 sandboxes/horizontal-bar/package.json
 delete mode 100644 sandboxes/horizontal-bar/src/App.vue
 delete mode 100644 sandboxes/horizontal-bar/src/components/horizontalBarChart.vue
 delete mode 100644 sandboxes/horizontal-bar/src/components/horizontalBarPage.vue
 delete mode 100644 stories/horizontalBar.stories.js
 delete mode 100644 test/HorizontalBar.spec.js
 delete mode 100644 test/examples/HorizontalBarChart.vue

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
new file mode 100644
index 00000000..c844df07
--- /dev/null
+++ b/.github/workflows/checks.yml
@@ -0,0 +1,28 @@
+name: Checks
+on:
+  pull_request:
+    branches:
+      - main
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    name: Checking size
+    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: 'pnpm'
+      - name: Check size
+        uses: andresz1/size-limit-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.size-limit b/.size-limit
new file mode 100644
index 00000000..59f4c740
--- /dev/null
+++ b/.size-limit
@@ -0,0 +1,24 @@
+[
+  {
+    "path": "dist/index.cjs",
+    "limit": "2.2 KB",
+    "webpack": false,
+    "running": false
+  },
+  {
+    "path": "dist/index.cjs",
+    "limit": "700 B",
+    "import": "{ Chart }"
+  },
+  {
+    "path": "dist/index.js",
+    "limit": "2 KB",
+    "webpack": false,
+    "running": false
+  },
+  {
+    "path": "dist/index.js",
+    "limit": "300 B",
+    "import": "{ Chart }"
+  }
+]
diff --git a/package.json b/package.json
index 0b5f50f5..89408e02 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "Wrapper",
     "Charts"
   ],
+  "sideEffects": false,
   "main": "./src/index.js",
   "typings": "./dist/index.d.ts",
   "publishConfig": {
@@ -46,10 +47,10 @@
   "scripts": {
     "prepublishOnly": "pnpm test && pnpm build && del ./package && clean-publish",
     "postpublish": "del ./package",
-    "emitDeclarations": "tsc --skipLibCheck --emitDeclarationOnly",
-    "build": "rollup -c & pnpm emitDeclarations",
+    "build": "rollup -c",
     "unit": "jest -c jest.config.json",
     "test": "pnpm lint && pnpm unit",
+    "test:size": "size-limit",
     "lint": "eslint --ext .js,.vue src test",
     "format": "prettier --write src test",
     "release": "standard-version",
@@ -59,7 +60,7 @@
     "start:storybook": "start-storybook -p 6006"
   },
   "peerDependencies": {
-    "chart.js": ">= 2.5"
+    "chart.js": "^3.7.0"
   },
   "dependencies": {
     "@types/chart.js": "^2.7.55"
@@ -70,19 +71,19 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
+    "@size-limit/preset-big-lib": "^7.0.8",
     "@storybook/addon-actions": "^6.4.12",
     "@storybook/addon-essentials": "^6.4.13",
     "@storybook/vue": "^6.4.12",
     "@swc/core": "^1.2.120",
     "@swc/helpers": "^0.3.2",
     "@swc/jest": "^0.2.15",
-    "@types/chart.js": "^2.7.55",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^27.0.0-alpha.4",
     "babel-jest": "^27.4.5",
     "babel-loader": "8.2.3",
     "browserslist": "^4.19.1",
-    "chart.js": "^2.8.0",
+    "chart.js": "^3.7.0",
     "clean-publish": "^4.0.0",
     "commitizen": "^4.2.4",
     "cross-env": "^5.1.1",
@@ -108,6 +109,7 @@
     "rollup-plugin-swc": "^0.2.0",
     "rollup-plugin-vue": "^6.0.0",
     "simple-git-hooks": "^2.7.0",
+    "size-limit": "^7.0.8",
     "standard-version": "^9.3.2",
     "vue": "2.6.14",
     "vue-hot-reload-api": "2.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd1e01fc..f1abc4b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,7 @@ specifiers:
   '@commitlint/cli': ^15.0.0
   '@commitlint/config-conventional': ^15.0.0
   '@rollup/plugin-node-resolve': ^13.1.3
+  '@size-limit/preset-big-lib': ^7.0.8
   '@storybook/addon-actions': ^6.4.12
   '@storybook/addon-essentials': ^6.4.13
   '@storybook/vue': ^6.4.12
@@ -18,7 +19,7 @@ specifiers:
   babel-jest: ^27.4.5
   babel-loader: 8.2.3
   browserslist: ^4.19.1
-  chart.js: ^2.8.0
+  chart.js: ^3.7.0
   clean-publish: ^4.0.0
   commitizen: ^4.2.4
   cross-env: ^5.1.1
@@ -44,6 +45,7 @@ specifiers:
   rollup-plugin-swc: ^0.2.0
   rollup-plugin-vue: ^6.0.0
   simple-git-hooks: ^2.7.0
+  size-limit: ^7.0.8
   standard-version: ^9.3.2
   vue: 2.6.14
   vue-hot-reload-api: 2.3.1
@@ -62,6 +64,7 @@ devDependencies:
   '@commitlint/cli': 15.0.0
   '@commitlint/config-conventional': 15.0.0
   '@rollup/plugin-node-resolve': 13.1.3_rollup@2.66.1
+  '@size-limit/preset-big-lib': 7.0.8_070b32a7cd5b24e1aa86940aabf66c67
   '@storybook/addon-actions': 6.4.13
   '@storybook/addon-essentials': 6.4.13_4578b0a91a8c579109142700d6e5eb33
   '@storybook/vue': 6.4.12_8e4bf89a47dc33bbe26be9420aa17ce8
@@ -73,7 +76,7 @@ devDependencies:
   babel-jest: 27.4.5_@babel+core@7.16.5
   babel-loader: 8.2.3_@babel+core@7.16.5
   browserslist: 4.19.1
-  chart.js: 2.9.4
+  chart.js: 3.7.1
   clean-publish: 4.0.0
   commitizen: 4.2.4
   cross-env: 5.2.1
@@ -99,6 +102,7 @@ devDependencies:
   rollup-plugin-swc: 0.2.0_@swc+core@1.2.120+rollup@2.66.1
   rollup-plugin-vue: 6.0.0
   simple-git-hooks: 2.7.0
+  size-limit: 7.0.8
   standard-version: 9.3.2
   vue: 2.6.14
   vue-hot-reload-api: 2.3.1
@@ -4002,6 +4006,78 @@ packages:
       '@sinonjs/commons': 1.8.3
     dev: true
 
+  /@sitespeed.io/tracium/0.3.3:
+    resolution: {integrity: sha512-dNZafjM93Y+F+sfwTO5gTpsGXlnc/0Q+c2+62ViqP3gkMWvHEMSKkaEHgVJLcLg3i/g19GSIPziiKpgyne07Bw==}
+    engines: {node: '>=8'}
+    dependencies:
+      debug: 4.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@size-limit/file/7.0.8_size-limit@7.0.8:
+    resolution: {integrity: sha512-1KeFQuMXIXAH/iELqIX7x+YNYDFvzIvmxcp9PrdwEoSNL0dXdaDIo9WE/yz8xvOmUcKaLfqbWkL75DM0k91WHQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    peerDependencies:
+      size-limit: 7.0.8
+    dependencies:
+      semver: 7.3.5
+      size-limit: 7.0.8
+    dev: true
+
+  /@size-limit/preset-big-lib/7.0.8_070b32a7cd5b24e1aa86940aabf66c67:
+    resolution: {integrity: sha512-m9C+FPPmETg9vg3V3Aq4hTflX1GVRpjYO94C4gqrl26I5YqB+BlKf8WKHmna3IbmJyePf7M8qvya/ougzMVHkQ==}
+    peerDependencies:
+      size-limit: 7.0.8
+    dependencies:
+      '@size-limit/file': 7.0.8_size-limit@7.0.8
+      '@size-limit/time': 7.0.8_size-limit@7.0.8
+      '@size-limit/webpack': 7.0.8_070b32a7cd5b24e1aa86940aabf66c67
+      size-limit: 7.0.8
+    transitivePeerDependencies:
+      - '@swc/core'
+      - bufferutil
+      - encoding
+      - esbuild
+      - supports-color
+      - uglify-js
+      - utf-8-validate
+      - webpack-cli
+    dev: true
+
+  /@size-limit/time/7.0.8_size-limit@7.0.8:
+    resolution: {integrity: sha512-CS3pHTxeQXgrrMbhlqYfSR+b4QGp1rjEcYYkByIP+X/Go88R44yp19tyBFmmCQzs2Te2BAxfq3jv8FG+54oBew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    peerDependencies:
+      size-limit: 7.0.8
+    dependencies:
+      estimo: 2.3.3
+      react: 17.0.2
+      size-limit: 7.0.8
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /@size-limit/webpack/7.0.8_070b32a7cd5b24e1aa86940aabf66c67:
+    resolution: {integrity: sha512-69YuY0o4geRNJDb55Vri+bNPs9+WZlK0pzcziip1p4uajCFMFQE0K8pKj3vsIOUADdTcimfypHciriCY/qrnJQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    peerDependencies:
+      size-limit: 7.0.8
+    dependencies:
+      escape-string-regexp: 4.0.0
+      nanoid: 3.2.0
+      size-limit: 7.0.8
+      webpack: 5.69.0_@swc+core@1.2.120
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+      - webpack-cli
+    dev: true
+
   /@storybook/addon-actions/6.4.13:
     resolution: {integrity: sha512-Bf/M3Kdq60xj48oXnRCm7+qstWL9wT8rjFPFm7+A0NSfVSlox6pFU5SfPuOI4Za/6Ll2XDaYwsaF3QYHX0jQAA==}
     peerDependencies:
@@ -6019,10 +6095,28 @@ packages:
     resolution: {integrity: sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==}
     dev: true
 
+  /@types/eslint-scope/3.7.3:
+    resolution: {integrity: sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==}
+    dependencies:
+      '@types/eslint': 8.4.1
+      '@types/estree': 0.0.51
+    dev: true
+
+  /@types/eslint/8.4.1:
+    resolution: {integrity: sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==}
+    dependencies:
+      '@types/estree': 0.0.51
+      '@types/json-schema': 7.0.9
+    dev: true
+
   /@types/estree/0.0.39:
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
     dev: true
 
+  /@types/estree/0.0.51:
+    resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
+    dev: true
+
   /@types/glob/7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
@@ -6224,6 +6318,14 @@ packages:
       '@types/yargs-parser': 20.2.1
     dev: true
 
+  /@types/yauzl/2.9.2:
+    resolution: {integrity: sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==}
+    requiresBuild: true
+    dependencies:
+      '@types/node': 16.11.12
+    dev: true
+    optional: true
+
   /@vue/babel-preset-app/3.0.0-beta.11_@babel+core@7.0.0-beta.47:
     resolution: {integrity: sha1-yLiJqnNGQFD5zT+dxiGVHYXCRQg=}
     dependencies:
@@ -6346,6 +6448,13 @@ packages:
       - supports-color
     dev: true
 
+  /@webassemblyjs/ast/1.11.1:
+    resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
+    dependencies:
+      '@webassemblyjs/helper-numbers': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+    dev: true
+
   /@webassemblyjs/ast/1.9.0:
     resolution: {integrity: sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==}
     dependencies:
@@ -6354,14 +6463,26 @@ packages:
       '@webassemblyjs/wast-parser': 1.9.0
     dev: true
 
+  /@webassemblyjs/floating-point-hex-parser/1.11.1:
+    resolution: {integrity: sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==}
+    dev: true
+
   /@webassemblyjs/floating-point-hex-parser/1.9.0:
     resolution: {integrity: sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==}
     dev: true
 
+  /@webassemblyjs/helper-api-error/1.11.1:
+    resolution: {integrity: sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==}
+    dev: true
+
   /@webassemblyjs/helper-api-error/1.9.0:
     resolution: {integrity: sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==}
     dev: true
 
+  /@webassemblyjs/helper-buffer/1.11.1:
+    resolution: {integrity: sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==}
+    dev: true
+
   /@webassemblyjs/helper-buffer/1.9.0:
     resolution: {integrity: sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==}
     dev: true
@@ -6382,10 +6503,31 @@ packages:
       '@webassemblyjs/ast': 1.9.0
     dev: true
 
+  /@webassemblyjs/helper-numbers/1.11.1:
+    resolution: {integrity: sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==}
+    dependencies:
+      '@webassemblyjs/floating-point-hex-parser': 1.11.1
+      '@webassemblyjs/helper-api-error': 1.11.1
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@webassemblyjs/helper-wasm-bytecode/1.11.1:
+    resolution: {integrity: sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==}
+    dev: true
+
   /@webassemblyjs/helper-wasm-bytecode/1.9.0:
     resolution: {integrity: sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==}
     dev: true
 
+  /@webassemblyjs/helper-wasm-section/1.11.1:
+    resolution: {integrity: sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+    dev: true
+
   /@webassemblyjs/helper-wasm-section/1.9.0:
     resolution: {integrity: sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==}
     dependencies:
@@ -6395,22 +6537,51 @@ packages:
       '@webassemblyjs/wasm-gen': 1.9.0
     dev: true
 
+  /@webassemblyjs/ieee754/1.11.1:
+    resolution: {integrity: sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==}
+    dependencies:
+      '@xtuc/ieee754': 1.2.0
+    dev: true
+
   /@webassemblyjs/ieee754/1.9.0:
     resolution: {integrity: sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==}
     dependencies:
       '@xtuc/ieee754': 1.2.0
     dev: true
 
+  /@webassemblyjs/leb128/1.11.1:
+    resolution: {integrity: sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==}
+    dependencies:
+      '@xtuc/long': 4.2.2
+    dev: true
+
   /@webassemblyjs/leb128/1.9.0:
     resolution: {integrity: sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==}
     dependencies:
       '@xtuc/long': 4.2.2
     dev: true
 
+  /@webassemblyjs/utf8/1.11.1:
+    resolution: {integrity: sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==}
+    dev: true
+
   /@webassemblyjs/utf8/1.9.0:
     resolution: {integrity: sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==}
     dev: true
 
+  /@webassemblyjs/wasm-edit/1.11.1:
+    resolution: {integrity: sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/helper-wasm-section': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+      '@webassemblyjs/wasm-opt': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+      '@webassemblyjs/wast-printer': 1.11.1
+    dev: true
+
   /@webassemblyjs/wasm-edit/1.9.0:
     resolution: {integrity: sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==}
     dependencies:
@@ -6424,6 +6595,16 @@ packages:
       '@webassemblyjs/wast-printer': 1.9.0
     dev: true
 
+  /@webassemblyjs/wasm-gen/1.11.1:
+    resolution: {integrity: sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/ieee754': 1.11.1
+      '@webassemblyjs/leb128': 1.11.1
+      '@webassemblyjs/utf8': 1.11.1
+    dev: true
+
   /@webassemblyjs/wasm-gen/1.9.0:
     resolution: {integrity: sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==}
     dependencies:
@@ -6434,6 +6615,15 @@ packages:
       '@webassemblyjs/utf8': 1.9.0
     dev: true
 
+  /@webassemblyjs/wasm-opt/1.11.1:
+    resolution: {integrity: sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+    dev: true
+
   /@webassemblyjs/wasm-opt/1.9.0:
     resolution: {integrity: sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==}
     dependencies:
@@ -6443,6 +6633,17 @@ packages:
       '@webassemblyjs/wasm-parser': 1.9.0
     dev: true
 
+  /@webassemblyjs/wasm-parser/1.11.1:
+    resolution: {integrity: sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-api-error': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/ieee754': 1.11.1
+      '@webassemblyjs/leb128': 1.11.1
+      '@webassemblyjs/utf8': 1.11.1
+    dev: true
+
   /@webassemblyjs/wasm-parser/1.9.0:
     resolution: {integrity: sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==}
     dependencies:
@@ -6465,6 +6666,13 @@ packages:
       '@xtuc/long': 4.2.2
     dev: true
 
+  /@webassemblyjs/wast-printer/1.11.1:
+    resolution: {integrity: sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@xtuc/long': 4.2.2
+    dev: true
+
   /@webassemblyjs/wast-printer/1.9.0:
     resolution: {integrity: sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==}
     dependencies:
@@ -6545,6 +6753,14 @@ packages:
       acorn-walk: 7.2.0
     dev: true
 
+  /acorn-import-assertions/1.8.0_acorn@8.6.0:
+    resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==}
+    peerDependencies:
+      acorn: ^8
+    dependencies:
+      acorn: 8.6.0
+    dev: true
+
   /acorn-jsx/5.3.2_acorn@7.4.1:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -7589,6 +7805,14 @@ packages:
     dev: true
     optional: true
 
+  /bl/4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+    dev: true
+
   /bluebird/3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
     dev: true
@@ -7796,6 +8020,10 @@ packages:
       node-int64: 0.4.0
     dev: true
 
+  /buffer-crc32/0.2.13:
+    resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
+    dev: true
+
   /buffer-from/1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: true
@@ -7812,6 +8040,13 @@ packages:
       isarray: 1.0.0
     dev: true
 
+  /buffer/5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: true
+
   /builtin-modules/3.2.0:
     resolution: {integrity: sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==}
     engines: {node: '>=6'}
@@ -7821,6 +8056,11 @@ packages:
     resolution: {integrity: sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=}
     dev: true
 
+  /bytes-iec/3.1.1:
+    resolution: {integrity: sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /bytes/3.0.0:
     resolution: {integrity: sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=}
     engines: {node: '>= 0.8'}
@@ -8164,24 +8404,8 @@ packages:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
     dev: true
 
-  /chart.js/2.9.4:
-    resolution: {integrity: sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==}
-    dependencies:
-      chartjs-color: 2.4.1
-      moment: 2.29.1
-    dev: true
-
-  /chartjs-color-string/0.6.0:
-    resolution: {integrity: sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==}
-    dependencies:
-      color-name: 1.1.4
-    dev: true
-
-  /chartjs-color/2.4.1:
-    resolution: {integrity: sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==}
-    dependencies:
-      chartjs-color-string: 0.6.0
-      color-convert: 1.9.3
+  /chart.js/3.7.1:
+    resolution: {integrity: sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==}
     dev: true
 
   /chokidar/2.1.8:
@@ -8218,6 +8442,21 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /chokidar/3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.2
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /chownr/1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
     dev: true
@@ -8244,6 +8483,10 @@ packages:
     resolution: {integrity: sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==}
     dev: true
 
+  /ci-job-number/1.2.2:
+    resolution: {integrity: sha512-CLOGsVDrVamzv8sXJGaILUVI6dsuAkouJP/n6t+OxLPeeA4DDby7zn9SB6EUpa1H7oIKoE+rMmkW80zYsFfUjA==}
+    dev: true
+
   /cipher-base/1.0.4:
     resolution: {integrity: sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==}
     dependencies:
@@ -8546,6 +8789,11 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
+  /commander/9.0.0:
+    resolution: {integrity: sha512-JJfP2saEKbQqvW+FI93OYUB4ByV5cizMpFMiiJI8xDbBvQvSkIk0VvQdn1CZ8mqAO8Loq2h0gYTYtDFUZUeERw==}
+    engines: {node: ^12.20.0 || >=14}
+    dev: true
+
   /commitizen/4.2.4:
     resolution: {integrity: sha512-LlZChbDzg3Ir3O2S7jSo/cgWp5/QwylQVr59K4xayVq8S4/RdKzSyJkghAiZZHfhh5t4pxunUoyeg0ml1q/7aw==}
     engines: {node: '>= 10'}
@@ -9085,6 +9333,14 @@ packages:
       cross-spawn: 6.0.5
     dev: true
 
+  /cross-fetch/3.1.5:
+    resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
+    dependencies:
+      node-fetch: 2.6.7
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /cross-spawn/5.1.0:
     resolution: {integrity: sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=}
     dependencies:
@@ -9602,6 +9858,10 @@ packages:
       debug: 2.6.9
     dev: true
 
+  /devtools-protocol/0.0.960912:
+    resolution: {integrity: sha512-I3hWmV9rWHbdnUdmMKHF2NuYutIM2kXz2mdXW8ha7TbRlGTVs+PF+PsB5QWvpCek4Fy9B+msiispCfwlhG5Sqg==}
+    dev: true
+
   /diacritics/1.3.0:
     resolution: {integrity: sha1-PvqHMj67hj5mls67AILUj/PW96E=}
     dev: true
@@ -9926,6 +10186,14 @@ packages:
       tapable: 1.1.3
     dev: true
 
+  /enhanced-resolve/5.9.0:
+    resolution: {integrity: sha512-weDYmzbBygL7HzGGS26M3hGQx68vehdEg6VUmqSOaFzXExFqlnKuSvsEJCVGQHScS8CQMbrAqftT+AzzHNt/YA==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.9
+      tapable: 2.2.1
+    dev: true
+
   /enquirer/2.3.6:
     resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
     engines: {node: '>=8.6'}
@@ -10005,6 +10273,10 @@ packages:
       isarray: 2.0.5
     dev: true
 
+  /es-module-lexer/0.9.3:
+    resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
+    dev: true
+
   /es-to-primitive/1.2.1:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
@@ -10395,6 +10667,24 @@ packages:
       estraverse: 5.3.0
     dev: true
 
+  /estimo/2.3.3:
+    resolution: {integrity: sha512-gl538IDBGtrT+ad9oLIPCdA4YeMJwyqDKFoqo8aHcls81RiX89OXmnEDV3dSMM/CLttuFm5Tl61ZJL0ERIEn/A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      '@sitespeed.io/tracium': 0.3.3
+      commander: 9.0.0
+      find-chrome-bin: 0.1.0
+      nanoid: 3.2.0
+      puppeteer-core: 13.3.2
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /estraverse/4.3.0:
     resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
     engines: {node: '>=4.0'}
@@ -10651,6 +10941,20 @@ packages:
       css: 2.2.4
     dev: true
 
+  /extract-zip/2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+    dependencies:
+      debug: 4.3.3
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.9.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /extsprintf/1.3.0:
     resolution: {integrity: sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=}
     engines: {'0': node >=0.6.0}
@@ -10722,6 +11026,12 @@ packages:
       bser: 2.1.1
     dev: true
 
+  /fd-slicer/1.1.0:
+    resolution: {integrity: sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=}
+    dependencies:
+      pend: 1.2.0
+    dev: true
+
   /figgy-pudding/3.5.2:
     resolution: {integrity: sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==}
     dev: true
@@ -10860,6 +11170,11 @@ packages:
       pkg-dir: 4.2.0
     dev: true
 
+  /find-chrome-bin/0.1.0:
+    resolution: {integrity: sha512-XoFZwaEn1R3pE6zNG8kH64l2e093hgB9+78eEKPmJK0o1EXEou+25cEWdtu2qq4DBQPDSe90VJAWVI2Sz9pX6Q==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
   /find-node-modules/2.1.2:
     resolution: {integrity: sha512-x+3P4mbtRPlSiVE1Qco0Z4YLU8WFiFcuWTf3m75OV9Uzcfs2Bg+O9N+r/K0AnmINBW06KpfqKwYJbFlFq4qNug==}
     dependencies:
@@ -11065,6 +11380,10 @@ packages:
       null-check: 1.0.0
     dev: true
 
+  /fs-constants/1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+    dev: true
+
   /fs-extra/0.30.0:
     resolution: {integrity: sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=}
     dependencies:
@@ -11260,6 +11579,13 @@ packages:
       pump: 3.0.0
     dev: true
 
+  /get-stream/5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+    dependencies:
+      pump: 3.0.0
+    dev: true
+
   /get-stream/6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -13914,6 +14240,11 @@ packages:
     engines: {node: '>=4.3.0 <5.0.0 || >=5.10'}
     dev: true
 
+  /loader-runner/4.2.0:
+    resolution: {integrity: sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==}
+    engines: {node: '>=6.11.5'}
+    dev: true
+
   /loader-utils/0.2.17:
     resolution: {integrity: sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=}
     dependencies:
@@ -14666,6 +14997,10 @@ packages:
       is-extendable: 1.0.1
     dev: true
 
+  /mkdirp-classic/0.5.3:
+    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
+    dev: true
+
   /mkdirp/0.3.0:
     resolution: {integrity: sha1-G79asbqCevI1dRQ0kEJkVfSB/h4=}
     deprecated: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
@@ -14691,6 +15026,7 @@ packages:
 
   /moment/2.29.1:
     resolution: {integrity: sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==}
+    dev: false
 
   /moo-color/1.0.2:
     resolution: {integrity: sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==}
@@ -14783,6 +15119,12 @@ packages:
       nanoassert: 1.1.0
     dev: true
 
+  /nanospinner/1.0.0:
+    resolution: {integrity: sha512-14c2r2QQ9xfTmdbqdF51FKCNvww+0ZON9GeEHur+pBdOufoFvxD4CZQRaYWmFrGH3Nuv7PZ/9Q+wsV+hFSp32g==}
+    dependencies:
+      picocolors: 1.0.0
+    dev: true
+
   /nanotiming/7.3.1:
     resolution: {integrity: sha512-l3lC7v/PfOuRWQa8vV29Jo6TG10wHtnthLElFXs4Te4Aas57Fo4n1Q8LH9n+NDh9riOzTVvb2QNBhTS4JUKNjw==}
     dependencies:
@@ -14849,6 +15191,18 @@ packages:
       whatwg-url: 5.0.0
     dev: true
 
+  /node-fetch/2.6.7:
+    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
   /node-int64/0.4.0:
     resolution: {integrity: sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=}
     dev: true
@@ -15503,6 +15857,10 @@ packages:
       sha.js: 2.4.11
     dev: true
 
+  /pend/1.2.0:
+    resolution: {integrity: sha1-elfrVQpng/kRUzH89GY9XI4AelA=}
+    dev: true
+
   /performance-now/2.1.0:
     resolution: {integrity: sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=}
     dev: true
@@ -16134,6 +16492,10 @@ packages:
       ipaddr.js: 1.9.1
     dev: true
 
+  /proxy-from-env/1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: true
+
   /prr/1.0.1:
     resolution: {integrity: sha1-0/wRS6BplaRexok/SEzrHXj19HY=}
     dev: true
@@ -16283,6 +16645,29 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /puppeteer-core/13.3.2:
+    resolution: {integrity: sha512-9T8deXmLWf55/RvDpl32vP68stTufqvtj6fc9hH09ZwCLh5IwnN9Z0MWHfDMTLiW6MUpW2Flx5CQWt1SCUT47g==}
+    engines: {node: '>=10.18.1'}
+    dependencies:
+      cross-fetch: 3.1.5
+      debug: 4.3.3
+      devtools-protocol: 0.0.960912
+      extract-zip: 2.0.1
+      https-proxy-agent: 5.0.0
+      pkg-dir: 4.2.0
+      progress: 2.0.3
+      proxy-from-env: 1.1.0
+      rimraf: 3.0.2
+      tar-fs: 2.1.1
+      unbzip2-stream: 1.4.3
+      ws: 8.5.0
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /q/1.5.1:
     resolution: {integrity: sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=}
     engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
@@ -16713,6 +17098,14 @@ packages:
       prop-types: 15.8.1
     dev: true
 
+  /react/17.0.2:
+    resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+    dev: true
+
   /read-pkg-up/3.0.0:
     resolution: {integrity: sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=}
     engines: {node: '>=4'}
@@ -17527,6 +17920,12 @@ packages:
       randombytes: 2.1.0
     dev: true
 
+  /serialize-javascript/6.0.0:
+    resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
   /serve-favicon/2.5.0:
     resolution: {integrity: sha1-k10kDN/g9YBTB/3+ln2IlCosvPA=}
     engines: {node: '>= 0.8.0'}
@@ -17647,6 +18046,21 @@ packages:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
 
+  /size-limit/7.0.8:
+    resolution: {integrity: sha512-3h76c9E0e/nNhYLSR7IBI/bSoXICeo7EYkYjlyVqNIsu7KvN/PQmMbIXeyd2QKIF8iZKhaiZQoXLkGWbyPDtvQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      bytes-iec: 3.1.1
+      chokidar: 3.5.3
+      ci-job-number: 1.2.2
+      globby: 11.1.0
+      lilconfig: 2.0.4
+      mkdirp: 1.0.4
+      nanospinner: 1.0.0
+      picocolors: 1.0.0
+    dev: true
+
   /slash/1.0.0:
     resolution: {integrity: sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=}
     engines: {node: '>=0.10.0'}
@@ -18368,6 +18782,31 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /tapable/2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /tar-fs/2.1.1:
+    resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
+    dependencies:
+      chownr: 1.1.4
+      mkdirp-classic: 0.5.3
+      pump: 3.0.0
+      tar-stream: 2.2.0
+    dev: true
+
+  /tar-stream/2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.4
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+    dev: true
+
   /tar/6.1.11:
     resolution: {integrity: sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==}
     engines: {node: '>= 10'}
@@ -18473,6 +18912,33 @@ packages:
       - acorn
     dev: true
 
+  /terser-webpack-plugin/5.3.1_7bec9d4a17ebf61cb9900f77f279059d:
+    resolution: {integrity: sha512-GvlZdT6wPQKbDNW/GDQzZFg/j4vKU96yl2q6mcUkzKOgW4gwf1Z8cZToUCrz31XHlPWH8MVb1r2tFtdDtTGJ7g==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@swc/core': '*'
+      esbuild: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      esbuild:
+        optional: true
+      uglify-js:
+        optional: true
+    dependencies:
+      '@swc/core': 1.2.120
+      jest-worker: 27.4.5
+      schema-utils: 3.1.1
+      serialize-javascript: 6.0.0
+      source-map: 0.6.1
+      terser: 5.10.0_acorn@8.6.0
+      webpack: 5.69.0_@swc+core@1.2.120
+    transitivePeerDependencies:
+      - acorn
+    dev: true
+
   /terser/4.8.0:
     resolution: {integrity: sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==}
     engines: {node: '>=6.0.0'}
@@ -18514,6 +18980,22 @@ packages:
       source-map-support: 0.5.21
     dev: true
 
+  /terser/5.10.0_acorn@8.6.0:
+    resolution: {integrity: sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    peerDependencies:
+      acorn: ^8.5.0
+    peerDependenciesMeta:
+      acorn:
+        optional: true
+    dependencies:
+      acorn: 8.6.0
+      commander: 2.20.3
+      source-map: 0.7.3
+      source-map-support: 0.5.21
+    dev: true
+
   /test-exclude/6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
@@ -18959,6 +19441,13 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
+  /unbzip2-stream/1.4.3:
+    resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
+    dependencies:
+      buffer: 5.7.1
+      through: 2.3.8
+    dev: true
+
   /unfetch/4.2.0:
     resolution: {integrity: sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==}
     dev: true
@@ -19681,7 +20170,7 @@ packages:
       graceful-fs: 4.2.9
       neo-async: 2.6.2
     optionalDependencies:
-      chokidar: 3.5.2
+      chokidar: 3.5.3
       watchpack-chokidar2: 2.0.1
     dev: true
 
@@ -19832,6 +20321,11 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /webpack-sources/3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
   /webpack-virtual-modules/0.2.2:
     resolution: {integrity: sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==}
     dependencies:
@@ -19876,6 +20370,46 @@ packages:
       webpack-sources: 1.4.3
     dev: true
 
+  /webpack/5.69.0_@swc+core@1.2.120:
+    resolution: {integrity: sha512-E5Fqu89Gu8fR6vejRqu26h8ld/k6/dCVbeGUcuZjc+goQHDfCPU9rER71JmdtBYGmci7Ec2aFEATQ2IVXKy2wg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+    dependencies:
+      '@types/eslint-scope': 3.7.3
+      '@types/estree': 0.0.51
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/wasm-edit': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+      acorn: 8.6.0
+      acorn-import-assertions: 1.8.0_acorn@8.6.0
+      browserslist: 4.19.1
+      chrome-trace-event: 1.0.3
+      enhanced-resolve: 5.9.0
+      es-module-lexer: 0.9.3
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.9
+      json-parse-better-errors: 1.0.2
+      loader-runner: 4.2.0
+      mime-types: 2.1.34
+      neo-async: 2.6.2
+      schema-utils: 3.1.1
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.1_7bec9d4a17ebf61cb9900f77f279059d
+      watchpack: 2.3.1
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+    dev: true
+
   /webpackbar/2.6.4_webpack@4.46.0:
     resolution: {integrity: sha512-uQzJwuX172E+Vnk2NRFSM1hZBMCXd2CIpRUl1hr5tbAndTGVnDmYXQKHsbgbCKQXFJKKAl8EHYsdeauJZu2Qvg==}
     engines: {node: '>= 6.9.0'}
@@ -20201,6 +20735,19 @@ packages:
         optional: true
     dev: true
 
+  /ws/8.5.0:
+    resolution: {integrity: sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
   /xdg-basedir/3.0.0:
     resolution: {integrity: sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=}
     engines: {node: '>=4'}
@@ -20301,6 +20848,13 @@ packages:
       window-size: 0.1.0
     dev: true
 
+  /yauzl/2.10.0:
+    resolution: {integrity: sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=}
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+    dev: true
+
   /ylru/1.2.1:
     resolution: {integrity: sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==}
     engines: {node: '>= 4.0.0'}
diff --git a/sandboxes/bar/package.json b/sandboxes/bar/package.json
index 50462300..ec0db9b6 100644
--- a/sandboxes/bar/package.json
+++ b/sandboxes/bar/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-bar-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/bar/src/components/barChart.vue b/sandboxes/bar/src/components/barChart.vue
index 9a904ef0..6e1237bf 100644
--- a/sandboxes/bar/src/components/barChart.vue
+++ b/sandboxes/bar/src/components/barChart.vue
@@ -5,6 +5,17 @@
 
 <script>
 import { Bar } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
 export default {
   name: 'BarChart',
diff --git a/sandboxes/bubble/package.json b/sandboxes/bubble/package.json
index 41dd2cb1..191e2648 100644
--- a/sandboxes/bubble/package.json
+++ b/sandboxes/bubble/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-bubble-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/bubble/src/components/bubbleChart.vue b/sandboxes/bubble/src/components/bubbleChart.vue
index a070f326..112789d7 100644
--- a/sandboxes/bubble/src/components/bubbleChart.vue
+++ b/sandboxes/bubble/src/components/bubbleChart.vue
@@ -5,6 +5,16 @@
 
 <script>
 import { Bubble } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale)
 
 export default {
   name: 'BubbleChart',
diff --git a/sandboxes/custom/package.json b/sandboxes/custom/package.json
index 2f7a3875..ffc20c78 100644
--- a/sandboxes/custom/package.json
+++ b/sandboxes/custom/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-custom-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/custom/src/components/customChart.vue b/sandboxes/custom/src/components/customChart.vue
index ddc760c4..034dc4ab 100644
--- a/sandboxes/custom/src/components/customChart.vue
+++ b/sandboxes/custom/src/components/customChart.vue
@@ -4,13 +4,32 @@
 #in an empty template and unexpected errors.
 
 <script>
-import Chart from 'chart.js'
 import { generateChart } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineController,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
 
-Chart.defaults.LineWithLine = Chart.defaults.line
-Chart.controllers.LineWithLine = Chart.controllers.line.extend({
-  draw: function (ease) {
-    Chart.controllers.line.prototype.draw.call(this, ease)
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale
+)
+
+class LineWithLineController extends LineController {
+  draw() {
+    super.draw(arguments)
 
     if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
       let activePoint = this.chart.tooltip._active[0]
@@ -30,9 +49,13 @@ Chart.controllers.LineWithLine = Chart.controllers.line.extend({
       ctx.restore()
     }
   }
-})
+}
 
-const LineWithLine = generateChart('line-with-chart', 'LineWithLine')
+const LineWithLine = generateChart(
+  'line-with-chart',
+  'line',
+  LineWithLineController
+)
 
 export default {
   name: 'CustomChart',
diff --git a/sandboxes/doughnut/package.json b/sandboxes/doughnut/package.json
index 18f8fe51..61272420 100644
--- a/sandboxes/doughnut/package.json
+++ b/sandboxes/doughnut/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-doughnut-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/doughnut/src/components/doughnutChart.vue b/sandboxes/doughnut/src/components/doughnutChart.vue
index fe01d27f..ff112687 100644
--- a/sandboxes/doughnut/src/components/doughnutChart.vue
+++ b/sandboxes/doughnut/src/components/doughnutChart.vue
@@ -5,6 +5,16 @@
 
 <script>
 import { Doughnut } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
 
 export default {
   name: 'DoughnutChart',
diff --git a/sandboxes/horizontal-bar/index.html b/sandboxes/horizontal-bar/index.html
deleted file mode 100644
index 8968ba00..00000000
--- a/sandboxes/horizontal-bar/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Vue ChartJS</title>
-  </head>
-
-  <body>
-    <div id="app"></div>
-  </body>
-</html>
diff --git a/sandboxes/horizontal-bar/index.js b/sandboxes/horizontal-bar/index.js
deleted file mode 100644
index 6cf84791..00000000
--- a/sandboxes/horizontal-bar/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Vue from 'vue'
-import App from './src/App.vue'
-
-new Vue({
-  render: h => h(App)
-}).$mount('#app')
diff --git a/sandboxes/horizontal-bar/package.json b/sandboxes/horizontal-bar/package.json
deleted file mode 100644
index 07ea04d8..00000000
--- a/sandboxes/horizontal-bar/package.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "vue-chartjs-horizontal-bar-example",
-  "dependencies": {
-    "vue": "^2.6.11",
-    "chart.js": "2.6.0",
-    "vue-chartjs": "3.5.1"
-  }
-}
diff --git a/sandboxes/horizontal-bar/src/App.vue b/sandboxes/horizontal-bar/src/App.vue
deleted file mode 100644
index f2852c4b..00000000
--- a/sandboxes/horizontal-bar/src/App.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <horizontal-bar-page />
-</template>
-
-<script>
-import HorizontalBarPage from './components/horizontalBarPage.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HorizontalBarPage
-  }
-}
-</script>
diff --git a/sandboxes/horizontal-bar/src/components/horizontalBarChart.vue b/sandboxes/horizontal-bar/src/components/horizontalBarChart.vue
deleted file mode 100644
index 0c18351f..00000000
--- a/sandboxes/horizontal-bar/src/components/horizontalBarChart.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-#Do not include the template tag in your .vue single-file components. Vue can
-#not merge templates. If you add an empty template tag, Vue will take the
-#template from your component and not from the extended one, which will result
-#in an empty template and unexpected errors.
-
-<script>
-import { HorizontalBar } from 'vue-chartjs'
-
-export default {
-  name: 'HorizontalBarChart',
-  extends: HorizontalBar,
-  data: () => ({
-    chartdata: {
-      labels: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December'
-      ],
-      datasets: [
-        {
-          label: 'Data One',
-          backgroundColor: '#f87979',
-          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
-        }
-      ]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false
-    }
-  }),
-
-  mounted() {
-    this.renderChart(this.chartdata, this.options)
-  }
-}
-</script>
diff --git a/sandboxes/horizontal-bar/src/components/horizontalBarPage.vue b/sandboxes/horizontal-bar/src/components/horizontalBarPage.vue
deleted file mode 100644
index ff60685e..00000000
--- a/sandboxes/horizontal-bar/src/components/horizontalBarPage.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <horizontal-bar-chart
-    :chart-id="chartId"
-    :width="width"
-    :height="height"
-    :css-classes="cssClasses"
-    :styles="styles"
-    :plugins="plugins"
-  />
-</template>
-
-<script>
-import HorizontalBarChart from './horizontalBarChart.vue'
-
-export default {
-  name: 'HorizontalBarPage',
-  components: {
-    HorizontalBarChart
-  },
-  props: {
-    chartId: {
-      type: String,
-      default: 'horizontalbar-chart'
-    },
-    width: {
-      type: Number,
-      default: 400
-    },
-    height: {
-      type: Number,
-      default: 400
-    },
-    cssClasses: {
-      default: '',
-      type: String
-    },
-    styles: {
-      type: Object,
-      default: () => {}
-    },
-    plugins: {
-      type: Array,
-      default: () => []
-    }
-  }
-}
-</script>
diff --git a/sandboxes/line/package.json b/sandboxes/line/package.json
index 506f0cac..bfee27c6 100644
--- a/sandboxes/line/package.json
+++ b/sandboxes/line/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-line-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/line/src/components/lineChart.vue b/sandboxes/line/src/components/lineChart.vue
index 144c5c58..fef2cc96 100644
--- a/sandboxes/line/src/components/lineChart.vue
+++ b/sandboxes/line/src/components/lineChart.vue
@@ -5,6 +5,16 @@
 
 <script>
 import { Line } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale)
 
 export default {
   name: 'LineChart',
diff --git a/sandboxes/pie/package.json b/sandboxes/pie/package.json
index 629603c1..0d5c65ad 100644
--- a/sandboxes/pie/package.json
+++ b/sandboxes/pie/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-pie-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/pie/src/components/pieChart.vue b/sandboxes/pie/src/components/pieChart.vue
index 5e89d126..a52fa391 100644
--- a/sandboxes/pie/src/components/pieChart.vue
+++ b/sandboxes/pie/src/components/pieChart.vue
@@ -5,6 +5,16 @@
 
 <script>
 import { Pie } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
 
 export default {
   name: 'PieChart',
diff --git a/sandboxes/polar-area/package.json b/sandboxes/polar-area/package.json
index a707db39..9480a163 100644
--- a/sandboxes/polar-area/package.json
+++ b/sandboxes/polar-area/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-polar-area-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/polar-area/src/components/polarAreaChart.vue b/sandboxes/polar-area/src/components/polarAreaChart.vue
index 2dbbdcc9..ca27a9f1 100644
--- a/sandboxes/polar-area/src/components/polarAreaChart.vue
+++ b/sandboxes/polar-area/src/components/polarAreaChart.vue
@@ -5,6 +5,16 @@
 
 <script>
 import { PolarArea } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  RadialLinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale)
 
 export default {
   name: 'PolarAreaChart',
diff --git a/sandboxes/radar/package.json b/sandboxes/radar/package.json
index 7ad21808..5ca7bbc4 100644
--- a/sandboxes/radar/package.json
+++ b/sandboxes/radar/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-radar-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/radar/src/components/radarChart.vue b/sandboxes/radar/src/components/radarChart.vue
index 70770291..06d759aa 100644
--- a/sandboxes/radar/src/components/radarChart.vue
+++ b/sandboxes/radar/src/components/radarChart.vue
@@ -5,6 +5,16 @@
 
 <script>
 import { Radar } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  RadialLinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, PointElement, RadialLinearScale)
 
 export default {
   name: 'RadarChart',
diff --git a/sandboxes/reactive-prop/package.json b/sandboxes/reactive-prop/package.json
index a15ebdf6..b2d69118 100644
--- a/sandboxes/reactive-prop/package.json
+++ b/sandboxes/reactive-prop/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-reactive-prop-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/reactive-prop/src/components/reactivePropChart.vue b/sandboxes/reactive-prop/src/components/reactivePropChart.vue
index 60566f7a..32e50fae 100644
--- a/sandboxes/reactive-prop/src/components/reactivePropChart.vue
+++ b/sandboxes/reactive-prop/src/components/reactivePropChart.vue
@@ -5,6 +5,17 @@
 
 <script>
 import { Bar, mixins } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
 const { reactiveProp } = mixins
 
diff --git a/sandboxes/reactive/package.json b/sandboxes/reactive/package.json
index 88a0253b..52d18672 100644
--- a/sandboxes/reactive/package.json
+++ b/sandboxes/reactive/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-reactive-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/reactive/src/components/reactiveChart.vue b/sandboxes/reactive/src/components/reactiveChart.vue
index 4b0cb866..2c70ecf4 100644
--- a/sandboxes/reactive/src/components/reactiveChart.vue
+++ b/sandboxes/reactive/src/components/reactiveChart.vue
@@ -5,6 +5,17 @@
 
 <script>
 import { Bar, mixins } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
 const { reactiveData } = mixins
 
diff --git a/sandboxes/scatter/package.json b/sandboxes/scatter/package.json
index 4b34b470..6e362ffd 100644
--- a/sandboxes/scatter/package.json
+++ b/sandboxes/scatter/package.json
@@ -2,7 +2,7 @@
   "name": "vue-chartjs-scatter-example",
   "dependencies": {
     "vue": "^2.6.11",
-    "chart.js": "2.6.0",
+    "chart.js": "3.7.0",
     "vue-chartjs": "3.5.1"
   }
 }
diff --git a/sandboxes/scatter/src/components/scatterChart.vue b/sandboxes/scatter/src/components/scatterChart.vue
index f8491fd5..6aeeef00 100644
--- a/sandboxes/scatter/src/components/scatterChart.vue
+++ b/sandboxes/scatter/src/components/scatterChart.vue
@@ -5,6 +5,16 @@
 
 <script>
 import { Scatter } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  CategoryScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale)
 
 export default {
   name: 'ScatterChart',
diff --git a/src/BaseCharts.js b/src/BaseCharts.js
index 2bc8126d..7164ed18 100644
--- a/src/BaseCharts.js
+++ b/src/BaseCharts.js
@@ -1,6 +1,16 @@
-import Chart from 'chart.js'
+import {
+  Chart,
+  BarController,
+  BubbleController,
+  DoughnutController,
+  LineController,
+  PieController,
+  PolarAreaController,
+  RadarController,
+  ScatterController
+} from 'chart.js'
 
-export function generateChart(chartId, chartType) {
+export function generateChart(chartId, chartType, chartController) {
   return {
     render: function (createElement) {
       return createElement(
@@ -49,34 +59,38 @@ export function generateChart(chartId, chartType) {
         }
       }
     },
-
     data() {
       return {
-        _chart: null,
-        _plugins: this.plugins
+        _chart: null
       }
     },
-
+    created() {
+      Chart.register(chartController)
+    },
     methods: {
-      addPlugin(plugin) {
-        this.$data._plugins.push(plugin)
-      },
-      generateLegend() {
+      renderChart(data, options) {
         if (this.$data._chart) {
-          return this.$data._chart.generateLegend()
+          this.$data._chart.destroy()
         }
-      },
-      renderChart(data, options) {
-        if (this.$data._chart) this.$data._chart.destroy()
-        if (!this.$refs.canvas)
+
+        if (!this.$refs.canvas) {
           throw new Error(
             'Please remove the <template></template> tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components'
           )
+        }
+
+        const chartOptions = options
+
+        if (this.plugins.length > 0) {
+          for (const plugin of this.plugins) {
+            chartOptions['plugins'] = { ...chartOptions.plugins, ...plugin }
+          }
+        }
+
         this.$data._chart = new Chart(this.$refs.canvas.getContext('2d'), {
           type: chartType,
           data: data,
-          options: options,
-          plugins: this.$data._plugins
+          options: chartOptions
         })
       }
     },
@@ -88,22 +102,56 @@ export function generateChart(chartId, chartType) {
   }
 }
 
-export const Bar = generateChart('bar-chart', 'bar')
-export const HorizontalBar = generateChart(
-  'horizontalbar-chart',
-  'horizontalBar'
+export const Bar = /* #__PURE__ */ generateChart(
+  'bar-chart',
+  'bar',
+  BarController
+)
+
+export const Doughnut = /* #__PURE__ */ generateChart(
+  'doughnut-chart',
+  'doughnut',
+  DoughnutController
+)
+
+export const Line = /* #__PURE__ */ generateChart(
+  'line-chart',
+  'line',
+  LineController
+)
+
+export const Pie = /* #__PURE__ */ generateChart(
+  'pie-chart',
+  'pie',
+  PieController
+)
+
+export const PolarArea = /* #__PURE__ */ generateChart(
+  'polar-chart',
+  'polarArea',
+  PolarAreaController
+)
+
+export const Radar = /* #__PURE__ */ generateChart(
+  'radar-chart',
+  'radar',
+  RadarController
+)
+
+export const Bubble = /* #__PURE__ */ generateChart(
+  'bubble-chart',
+  'bubble',
+  BubbleController
+)
+
+export const Scatter = /* #__PURE__ */ generateChart(
+  'scatter-chart',
+  'scatter',
+  ScatterController
 )
-export const Doughnut = generateChart('doughnut-chart', 'doughnut')
-export const Line = generateChart('line-chart', 'line')
-export const Pie = generateChart('pie-chart', 'pie')
-export const PolarArea = generateChart('polar-chart', 'polarArea')
-export const Radar = generateChart('radar-chart', 'radar')
-export const Bubble = generateChart('bubble-chart', 'bubble')
-export const Scatter = generateChart('scatter-chart', 'scatter')
 
 export default {
   Bar,
-  HorizontalBar,
   Doughnut,
   Line,
   Pie,
diff --git a/src/index.js b/src/index.js
index ad5f2af7..73bc7c8a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import mixins from './mixins/index.js'
 
 import {
   Bar,
-  HorizontalBar,
   Doughnut,
   Line,
   Pie,
@@ -15,7 +14,6 @@ import {
 
 const VueCharts = {
   Bar,
-  HorizontalBar,
   Doughnut,
   Line,
   Pie,
@@ -36,7 +34,6 @@ export default VueCharts
 export {
   VueCharts,
   Bar,
-  HorizontalBar,
   Doughnut,
   Line,
   Pie,
diff --git a/stories/horizontalBar.stories.js b/stories/horizontalBar.stories.js
deleted file mode 100644
index 64f72db1..00000000
--- a/stories/horizontalBar.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import HorizontalBarChart from '../sandboxes/horizontal-bar/src/components/horizontalBarChart.vue'
-
-export default {
-  title: 'HorizontalBarChart',
-  component: HorizontalBarChart,
-  parameters: {
-    layout: 'centered'
-  }
-}
-
-const Template = (_, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { HorizontalBarChart },
-  template: '<HorizontalBarChart />'
-})
-
-export const DefaultHorizontalBar = Template.bind({})
-
-DefaultHorizontalBar.args = {
-  chartId: 'horizontal-bar-chart',
-  width: 400,
-  height: 400,
-  plugins: []
-}
diff --git a/test/Bar.spec.js b/test/Bar.spec.js
index 4b1559ea..87c90e7a 100644
--- a/test/Bar.spec.js
+++ b/test/Bar.spec.js
@@ -32,35 +32,22 @@ describe('BarChart', () => {
   it('should destroy chart instance', done => {
     const wrapper = mount(Component)
     const { vm } = wrapper
-
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
+    expect(vm.$children[0].$data._chart.ctx).not.toBe(null)
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
+      expect(vm.$children[0].$data._chart.ctx).toBe(null)
       done()
     })
   })
 
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      id: 'test'
+      title: {
+        display: true
+      }
     }
 
     const wrapper = mount(Component, {
@@ -68,6 +55,6 @@ describe('BarChart', () => {
     })
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
+    expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1)
   })
 })
diff --git a/test/Bubble.spec.js b/test/Bubble.spec.js
index 8899e8d1..067564d1 100644
--- a/test/Bubble.spec.js
+++ b/test/Bubble.spec.js
@@ -34,34 +34,22 @@ describe('BubbleChart', () => {
     const wrapper = mount(Component)
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
+    expect(vm.$children[0].$data._chart.ctx).not.toBe(null)
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
+      expect(vm.$children[0].$data._chart.ctx).toBe(null)
       done()
     })
   })
 
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      id: 'test'
+      title: {
+        display: true
+      }
     }
 
     const wrapper = mount(Component, {
@@ -69,6 +57,6 @@ describe('BubbleChart', () => {
     })
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
+    expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1)
   })
 })
diff --git a/test/Doughnut.spec.js b/test/Doughnut.spec.js
index 52306a6c..d59bfa46 100644
--- a/test/Doughnut.spec.js
+++ b/test/Doughnut.spec.js
@@ -34,34 +34,22 @@ describe('DoughnutChart', () => {
     const wrapper = mount(Component)
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
+    expect(vm.$children[0].$data._chart.ctx).not.toBe(null)
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
+      expect(vm.$children[0].$data._chart.ctx).toBe(null)
       done()
     })
   })
 
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      id: 'test'
+      title: {
+        display: true
+      }
     }
 
     const wrapper = mount(Component, {
@@ -69,6 +57,6 @@ describe('DoughnutChart', () => {
     })
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
+    expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1)
   })
 })
diff --git a/test/HorizontalBar.spec.js b/test/HorizontalBar.spec.js
deleted file mode 100644
index c8be9617..00000000
--- a/test/HorizontalBar.spec.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { mount } from '@vue/test-utils'
-import HorizontalBarChart from './examples/HorizontalBarChart.vue'
-
-describe('HorizontalBarChart', () => {
-  const Component = {
-    template:
-      '<div><HorizontalBarChart :chart-id="chartId" :plugins="plugins" /></div>',
-    components: { HorizontalBarChart },
-    props: ['chartId', 'plugins']
-  }
-
-  it('should render a canvas', () => {
-    const wrapper = mount(Component)
-
-    const horizontalBarChartEl = wrapper.find('#horizontalbar-chart')
-    expect(horizontalBarChartEl.element.id).not.toBe('undefined')
-    expect(horizontalBarChartEl.exists()).toBe(true)
-
-    const canvasEl = wrapper.find('canvas')
-    expect(canvasEl.exists()).toBe(true)
-  })
-
-  it('should change id based on prop', () => {
-    const wrapper = mount(Component, {
-      propsData: { chartId: 'horizontalbarchartprop' }
-    })
-
-    const horizontalBarChartEl = wrapper.find('#horizontalbarchartprop')
-    expect(horizontalBarChartEl.element.id).not.toBe('undefined')
-    expect(horizontalBarChartEl.exists()).toBe(true)
-  })
-
-  it('should destroy chart instance', done => {
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
-
-    vm.$destroy()
-
-    vm.$nextTick(() => {
-      vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
-      done()
-    })
-  })
-
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
-  it('should add inline plugins based on prop', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component, {
-      propsData: { plugins: [testPlugin] }
-    })
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-})
diff --git a/test/Line.spec.js b/test/Line.spec.js
index d1a2aa8f..d5c60aa9 100644
--- a/test/Line.spec.js
+++ b/test/Line.spec.js
@@ -33,34 +33,22 @@ describe('LineChart', () => {
     const wrapper = mount(Component)
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
+    expect(vm.$children[0].$data._chart.ctx).not.toBe(null)
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
+      expect(vm.$children[0].$data._chart.ctx).toBe(null)
       done()
     })
   })
 
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      id: 'test'
+      title: {
+        display: true
+      }
     }
 
     const wrapper = mount(Component, {
@@ -68,6 +56,6 @@ describe('LineChart', () => {
     })
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
+    expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1)
   })
 })
diff --git a/test/Pie.spec.js b/test/Pie.spec.js
index a3333d2f..4b589508 100644
--- a/test/Pie.spec.js
+++ b/test/Pie.spec.js
@@ -32,34 +32,22 @@ describe('PieChart', () => {
     const wrapper = mount(Component)
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
+    expect(vm.$children[0].$data._chart.ctx).not.toBe(null)
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
+      expect(vm.$children[0].$data._chart.ctx).toBe(null)
       done()
     })
   })
 
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      id: 'test'
+      title: {
+        display: true
+      }
     }
 
     const wrapper = mount(Component, {
@@ -67,6 +55,6 @@ describe('PieChart', () => {
     })
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
+    expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1)
   })
 })
diff --git a/test/PolarArea.spec.js b/test/PolarArea.spec.js
index 1c7c19bf..36b3cf45 100644
--- a/test/PolarArea.spec.js
+++ b/test/PolarArea.spec.js
@@ -34,34 +34,22 @@ describe('PolarChart', () => {
     const wrapper = mount(Component)
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
+    expect(vm.$children[0].$data._chart.ctx).not.toBe(null)
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
+      expect(vm.$children[0].$data._chart.ctx).toBe(null)
       done()
     })
   })
 
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      id: 'test'
+      title: {
+        display: true
+      }
     }
 
     const wrapper = mount(Component, {
@@ -69,6 +57,6 @@ describe('PolarChart', () => {
     })
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
+    expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1)
   })
 })
diff --git a/test/Radar.spec.js b/test/Radar.spec.js
index 57ed92b7..ca491a49 100644
--- a/test/Radar.spec.js
+++ b/test/Radar.spec.js
@@ -33,34 +33,22 @@ describe('RadarChart', () => {
     const wrapper = mount(Component)
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
+    expect(vm.$children[0].$data._chart.ctx).not.toBe(null)
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
+      expect(vm.$children[0].$data._chart.ctx).toBe(null)
       done()
     })
   })
 
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      id: 'test'
+      title: {
+        display: true
+      }
     }
 
     const wrapper = mount(Component, {
@@ -68,6 +56,6 @@ describe('RadarChart', () => {
     })
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
+    expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1)
   })
 })
diff --git a/test/Scatter.spec.js b/test/Scatter.spec.js
index 6f07886f..14a2b99f 100644
--- a/test/Scatter.spec.js
+++ b/test/Scatter.spec.js
@@ -34,34 +34,22 @@ describe('ScatterChart', () => {
     const wrapper = mount(Component)
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._chart.chart.ctx).not.toBe(null)
+    expect(vm.$children[0].$data._chart.ctx).not.toBe(null)
 
     vm.$destroy()
 
     vm.$nextTick(() => {
       vm.$forceUpdate()
-      expect(vm.$children[0].$data._chart.chart.ctx).toBe(null)
+      expect(vm.$children[0].$data._chart.ctx).toBe(null)
       done()
     })
   })
 
-  it('should add an inline plugin to the array', () => {
-    const testPlugin = {
-      id: 'test'
-    }
-
-    const wrapper = mount(Component)
-    const { vm } = wrapper
-
-    expect(vm.$children[0].$data._plugins).toEqual([])
-    vm.$children[0].addPlugin(testPlugin)
-
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
-  })
-
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      id: 'test'
+      title: {
+        display: true
+      }
     }
 
     const wrapper = mount(Component, {
@@ -69,6 +57,6 @@ describe('ScatterChart', () => {
     })
     const { vm } = wrapper
 
-    expect(vm.$children[0].$data._plugins.length).toEqual(1)
+    expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1)
   })
 })
diff --git a/test/examples/BarChart.vue b/test/examples/BarChart.vue
index fa36ddf4..668cb74c 100644
--- a/test/examples/BarChart.vue
+++ b/test/examples/BarChart.vue
@@ -1,5 +1,16 @@
 <script>
 import { Bar } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
 export default {
   name: 'BarChart',
diff --git a/test/examples/BubbleChart.vue b/test/examples/BubbleChart.vue
index 78943071..6f470ed6 100644
--- a/test/examples/BubbleChart.vue
+++ b/test/examples/BubbleChart.vue
@@ -1,6 +1,17 @@
 <script>
 import { Bubble } from '../../src/index'
 
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale)
+
 export default {
   name: 'BubbleChart',
   extends: Bubble,
diff --git a/test/examples/CustomChart.vue b/test/examples/CustomChart.vue
index 43845bef..fc59d4bf 100644
--- a/test/examples/CustomChart.vue
+++ b/test/examples/CustomChart.vue
@@ -1,11 +1,30 @@
 <script>
-import Chart from 'chart.js'
 import { generateChart } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineController,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
 
-Chart.defaults.LineWithLine = Chart.defaults.line
-Chart.controllers.LineWithLine = Chart.controllers.line.extend({
-  draw: function (ease) {
-    Chart.controllers.line.prototype.draw.call(this, ease)
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  LinearScale
+)
+
+class LineWithLineController extends LineController {
+  draw() {
+    super.draw(arguments)
 
     if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
       let activePoint = this.chart.tooltip._active[0]
@@ -25,9 +44,13 @@ Chart.controllers.LineWithLine = Chart.controllers.line.extend({
       ctx.restore()
     }
   }
-})
+}
 
-const LineWithLine = generateChart('line-with-chart', 'LineWithLine')
+const LineWithLine = generateChart(
+  'line-with-chart',
+  'line',
+  LineWithLineController
+)
 
 export default {
   name: 'CustomChart',
diff --git a/test/examples/DoughnutChart.vue b/test/examples/DoughnutChart.vue
index 00494c65..1a333769 100644
--- a/test/examples/DoughnutChart.vue
+++ b/test/examples/DoughnutChart.vue
@@ -1,5 +1,15 @@
 <script>
 import { Doughnut } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
 
 export default {
   name: 'DoughnutChart',
diff --git a/test/examples/HorizontalBarChart.vue b/test/examples/HorizontalBarChart.vue
deleted file mode 100644
index 31fd1282..00000000
--- a/test/examples/HorizontalBarChart.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-import { HorizontalBar } from '../../src/index'
-
-export default {
-  name: 'HorizontalBarChart',
-  extends: HorizontalBar,
-  data: () => ({
-    chartdata: {
-      labels: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December'
-      ],
-      datasets: [
-        {
-          label: 'Data One',
-          backgroundColor: '#f87979',
-          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
-        }
-      ]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false
-    }
-  }),
-
-  mounted() {
-    this.renderChart(this.chartdata, this.options)
-  }
-}
-</script>
diff --git a/test/examples/LineChart.vue b/test/examples/LineChart.vue
index 4d5a66b6..74c164c2 100644
--- a/test/examples/LineChart.vue
+++ b/test/examples/LineChart.vue
@@ -1,5 +1,15 @@
 <script>
 import { Line } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale)
 
 export default {
   name: 'LineChart',
diff --git a/test/examples/PieChart.vue b/test/examples/PieChart.vue
index 93332b6a..1c80503e 100644
--- a/test/examples/PieChart.vue
+++ b/test/examples/PieChart.vue
@@ -1,5 +1,15 @@
 <script>
 import { Pie } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
 
 export default {
   name: 'PieChart',
diff --git a/test/examples/PolarAreaChart.vue b/test/examples/PolarAreaChart.vue
index a447b8fe..fbc8afd9 100644
--- a/test/examples/PolarAreaChart.vue
+++ b/test/examples/PolarAreaChart.vue
@@ -1,5 +1,15 @@
 <script>
 import { PolarArea } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  RadialLinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale)
 
 export default {
   name: 'PolarAreaChart',
diff --git a/test/examples/RadarChart.vue b/test/examples/RadarChart.vue
index 2d974144..ce2d1a71 100644
--- a/test/examples/RadarChart.vue
+++ b/test/examples/RadarChart.vue
@@ -1,5 +1,15 @@
 <script>
 import { Radar } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  RadialLinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, PointElement, RadialLinearScale)
 
 export default {
   name: 'RadarChart',
diff --git a/test/examples/ReactiveChart.vue b/test/examples/ReactiveChart.vue
index e397a4f7..3c9d6034 100644
--- a/test/examples/ReactiveChart.vue
+++ b/test/examples/ReactiveChart.vue
@@ -1,5 +1,16 @@
 <script>
 import { Bar, mixins } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
 const { reactiveData } = mixins
 
diff --git a/test/examples/ReactivePropChart.vue b/test/examples/ReactivePropChart.vue
index d0881cd5..36faa043 100644
--- a/test/examples/ReactivePropChart.vue
+++ b/test/examples/ReactivePropChart.vue
@@ -1,5 +1,16 @@
 <script>
 import { Bar, mixins } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
 const { reactiveProp } = mixins
 
diff --git a/test/examples/ScatterChart.vue b/test/examples/ScatterChart.vue
index 96e104ad..1f7b7ef9 100644
--- a/test/examples/ScatterChart.vue
+++ b/test/examples/ScatterChart.vue
@@ -1,5 +1,15 @@
 <script>
 import { Scatter } from '../../src/index'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  CategoryScale
+} from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale)
 
 export default {
   name: 'ScatterChart',