Make the plugin compatible with Chart.js v4 (#348)

Author: LeeLenaleee

docs/.vuepress/config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 // https://docs.netlify.com/configure-builds/environment-variables/#git-metadata
 const BRANCH = process.env.BRANCH || (process.env.NODE_ENV === 'development' ? 'local' : '');
 const IS_DEV = BRANCH ? !BRANCH.match(/^v\d\.\d\.\d/) : false;
@@ -67,6 +69,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();
+  },
   themeConfig: {
     repo: REPO_NAME,
     docsDir: 'docs',

karma.conf.js

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

package-lock.json

@@ -2,7 +2,7 @@
   "name": "chartjs-plugin-datalabels",
   "homepage": "https://chartjs-plugin-datalabels.netlify.app",
   "description": "Chart.js plugin to display labels on data elements",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "main": "dist/chartjs-plugin-datalabels.js",
   "module": "dist/chartjs-plugin-datalabels.esm.js",
@@ -41,7 +41,7 @@
     "@typescript-eslint/parser": "^5.30.6",
     "@vuepress/plugin-google-analytics": "^1.9.7",
     "archiver": "^5.3.1",
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "chartjs-test-utils": "^0.4.0",
     "eslint": "^8.19.0",
     "eslint-config-chartjs": "^0.3.0",
@@ -66,6 +66,6 @@
     "yargs": "^17.5.1"
   },
   "peerDependencies": {
-    "chart.js": "^3.0.0"
+    "chart.js": ">=3.0.0"
   }
 }

package.json

@@ -37,6 +37,11 @@ jasmine.fixture = {
 };
 jasmine.triggerMouseEvent = triggerMouseEvent;
 
+beforeAll(() => {
+  // Disable colors plugin for tests.
+  window.Chart.defaults.plugins.colors.enabled = false;
+});
+
 beforeEach(function() {
   addMatchers();