Change CHART.JS dependency to version 4 (#808)

* Add element diagrams to the annotation types guide

* Change CHART.JS dependency to version 4

* changes peerDeps

* changes peerDep

* fixes transpiller of webpack for doc

* removes axis options no needed

* apply review removing noDefaultScale fixtures for a unit test

* acquiring a chart to test retrieveScaleID function

docs/.vuepress/config.js

@@ -73,6 +73,17 @@ module.exports = {
       },
     }],
   ],
+  chainWebpack(config) {
+    config.module
+      .rule('chart.js')
+      .include.add(path.resolve('node_modules/chart.js')).end()
+      .use('babel-loader')
+      .loader('babel-loader')
+      .options({
+        presets: ['@babel/preset-env']
+      })
+      .end();
+  },
   markdown: {
     extendMarkdown: md => {
       md.use(require('markdown-it-include'), path.resolve(__dirname, '../'));

karma.conf.js

@@ -63,7 +63,7 @@ module.exports = function(karma) {
     files: [
       {pattern: 'test/fixtures/**/*.js', included: false},
       {pattern: 'test/fixtures/**/*.png', included: false},
-      {pattern: 'node_modules/chart.js/dist/chart.js'},
+      {pattern: 'node_modules/chart.js/dist/chart.umd.js'},
       {pattern: 'src/index.js', watched: false},
       {pattern: 'test/index.js'},
       {pattern: 'test/specs/**/**.js'}

package.json

@@ -2,7 +2,7 @@
   "name": "chartjs-plugin-annotation",
   "homepage": "https://www.chartjs.org/chartjs-plugin-annotation/index",
   "description": "Annotations for Chart.js",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "author": "Evert Timberg <[email protected]>",
   "license": "MIT",
   "main": "dist/chartjs-plugin-annotation.js",
@@ -33,14 +33,18 @@
     "test-types-integration": "mocha --full-trace test/integration/*-test.js"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
     "@simonbrunel/vuepress-plugin-versions": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "chart.js": "^3.7.0",
+    "babel-loader": "^8.3.0",
+    "chart.js": "^4.0.1",
     "chartjs-plugin-autocolors": "^0.0.5",
-    "chartjs-test-utils": "^0.4.0",
+    "chartjs-test-utils": "^0.5.0",
     "concurrently": "^7.0.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.2.0",
@@ -53,25 +57,25 @@
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-firefox-launcher": "^2.1.0",
-    "karma-jasmine": "^4.0.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
     "karma-rollup-preprocessor": "^7.0.7",
     "markdown-it-include": "^2.0.0",
     "mocha": "^9.1.3",
     "pixelmatch": "^5.2.1",
-    "rollup": "^2.45.2",
-    "rollup-plugin-istanbul": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup": "^3.3.0",
+    "rollup-plugin-istanbul": "^4.0.0",
     "typedoc": "^0.23.8",
     "typedoc-plugin-markdown": "^3.13.3",
     "typescript": "^4.2.4",
-    "vuepress": "^1.8.2",
+    "vuepress": "^1.9.7",
     "vuepress-plugin-flexsearch": "^0.3.0",
     "vuepress-plugin-redirect": "^1.2.5",
     "vuepress-plugin-typedoc": "^0.10.0",
-    "vuepress-theme-chartjs": "^0.2.0"
+    "vuepress-theme-chartjs": "^0.2.0",
+    "webpack": "^4.46.0"
   },
   "peerDependencies": {
-    "chart.js": "^3.7.0"
+    "chart.js": ">=3.7.0"
   }
 }

rollup.config.js

@@ -1,6 +1,6 @@
 const json = require('@rollup/plugin-json');
 const resolve = require('@rollup/plugin-node-resolve').default;
-const terser = require('rollup-plugin-terser').terser;
+const terser = require('@rollup/plugin-terser').default;
 const {name, version, homepage, main, module: _module} = require('./package.json');
 
 const banner = `/*!