From 870ceb097129cdfc17516c52d3e5573c8e0700e6 Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Wed, 25 Jan 2023 15:41:36 +0100
Subject: [PATCH 01/11] Add exports for node

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 89783f7c4..f6ab4ffc0 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "unpkg": "dist/chartjs-plugin-annotation.min.js",
   "exports": {
     "types": "./types/index.d.ts",
+    "node": "./dist/chartjs-plugin-annotation.min.js",
     "import": "./dist/chartjs-plugin-annotation.esm.js",
     "require": "./dist/chartjs-plugin-annotation.min.js",
     "script": "./dist/chartjs-plugin-annotation.min.js"

From 2eeb4df17faa9b5154fc97a8b487c6cb9fa0930e Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Thu, 26 Jan 2023 12:23:54 +0100
Subject: [PATCH 02/11] apply type module

---
 docs/.vuepress/{config.js => config.ts} | 15 +++++++++------
 karma.conf.js => karma.conf.cjs         |  6 +++---
 package.json                            | 11 +++++------
 rollup.config.js                        | 20 +++++++++++---------
 scripts/docs-config.sh                  |  2 +-
 test/seed-reporter.js                   |  2 +-
 6 files changed, 30 insertions(+), 26 deletions(-)
 rename docs/.vuepress/{config.js => config.ts} (94%)
 rename karma.conf.js => karma.conf.cjs (94%)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.ts
similarity index 94%
rename from docs/.vuepress/config.js
rename to docs/.vuepress/config.ts
index 301aad415..075ed0130 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.ts
@@ -1,8 +1,11 @@
-const path = require('path');
+import * as path from 'path';
+import markdownItInclude from 'markdown-it-include';
+import { DefaultThemeConfig, defineConfig, PluginTuple } from 'vuepress/config';
+
 const docsVersion = "VERSION";
 const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-annotation/master/' : `/chartjs-plugin-annotation/${docsVersion}/`;
 
-module.exports = {
+export default defineConfig({
   dest: 'dist/docs',
   title: 'chartjs-plugin-annotation',
   description: 'Annotations for Chart.js',
@@ -72,7 +75,7 @@ module.exports = {
         ]
       },
     }],
-  ],
+  ] as PluginTuple[],
   chainWebpack(config) {
     config.module
       .rule('chart.js')
@@ -86,7 +89,7 @@ module.exports = {
   },
   markdown: {
     extendMarkdown: md => {
-      md.use(require('markdown-it-include'), path.resolve(__dirname, '../'));
+      md.use(markdownItInclude, path.resolve(__dirname, '../'));
     }
   },
   themeConfig: {
@@ -220,5 +223,5 @@ module.exports = {
         'utils',
       ]
     }
-  }
-};
+ } as DefaultThemeConfig
+});
diff --git a/karma.conf.js b/karma.conf.cjs
similarity index 94%
rename from karma.conf.js
rename to karma.conf.cjs
index 9fc43e830..9ae4b7676 100644
--- a/karma.conf.js
+++ b/karma.conf.cjs
@@ -1,12 +1,10 @@
-const jasmineSeedReporter = require('./test/seed-reporter');
 const istanbul = require('rollup-plugin-istanbul');
 const json = require('@rollup/plugin-json');
 const resolve = require('@rollup/plugin-node-resolve').default;
-const builds = require('./rollup.config');
 const yargs = require('yargs');
 const env = process.env.NODE_ENV;
 
-module.exports = function(karma) {
+module.exports = async function(karma) {
   const args = yargs
     .option('verbose', {default: false})
     .argv;
@@ -15,6 +13,8 @@ module.exports = function(karma) {
   // we will prefer the unminified build which is easier to browse and works
   // better with source mapping. In other cases, pick the minified build to
   // make sure that the minification process (terser) doesn't break anything.
+  const builds = (await import('./rollup.config.js')).default;
+  const jasmineSeedReporter = (await import('./test/seed-reporter.js')).default;
   const regex = karma.autoWatch ? /chartjs-plugin-annotation\.js$/ : /chartjs-plugin-annotation\.min\.js$/;
   const build = builds.filter(v => v.output.file && v.output.file.match(regex))[0];
 
diff --git a/package.json b/package.json
index f6ab4ffc0..9c7f5a851 100644
--- a/package.json
+++ b/package.json
@@ -5,14 +5,13 @@
   "version": "2.1.2",
   "author": "Evert Timberg <evert.timberg@gmail.com>",
   "license": "MIT",
-  "main": "dist/chartjs-plugin-annotation.js",
-  "module": "dist/chartjs-plugin-annotation.esm.js",
+  "type": "module",
+  "main": "dist/chartjs-plugin-annotation.esm.js",
   "types": "types/index.d.ts",
   "jsdelivr": "dist/chartjs-plugin-annotation.min.js",
   "unpkg": "dist/chartjs-plugin-annotation.min.js",
   "exports": {
     "types": "./types/index.d.ts",
-    "node": "./dist/chartjs-plugin-annotation.min.js",
     "import": "./dist/chartjs-plugin-annotation.esm.js",
     "require": "./dist/chartjs-plugin-annotation.min.js",
     "script": "./dist/chartjs-plugin-annotation.min.js"
@@ -27,8 +26,8 @@
   ],
   "scripts": {
     "build": "rollup -c",
-    "dev": "karma start --auto-watch --no-single-run --browsers chrome",
-    "dev:ff": "karma start --auto-watch --no-single-run --browsers firefox",
+    "dev": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers chrome",
+    "dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox",
     "docs": "npm run build && vuepress build docs --no-cache",
     "docs:dev": "npm run build && vuepress dev docs --no-cache",
     "lint": "concurrently --group \"npm:lint-*\"",
@@ -36,7 +35,7 @@
     "lint-md": "eslint \"**/*.md\"",
     "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
     "test": "cross-env NODE_ENV=test concurrently --group \"npm:test-*\"",
-    "test-karma": "karma start --auto-watch --single-run",
+    "test-karma": "karma start ./karma.conf.cjs --auto-watch --single-run",
     "test-lint": "npm run lint",
     "test-types": "tsc -p types/tests/",
     "test-types-integration": "mocha --full-trace test/integration/*-test.js"
diff --git a/rollup.config.js b/rollup.config.js
index 27ea5991f..16e709814 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,13 +1,15 @@
-const json = require('@rollup/plugin-json');
-const resolve = require('@rollup/plugin-node-resolve').default;
-const terser = require('@rollup/plugin-terser').default;
-const {name, version, homepage, main, module: _module} = require('./package.json');
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import json from '@rollup/plugin-json';
+import {readFileSync} from 'fs';
+
+const {name, version, homepage, main, license, jsdelivr} = JSON.parse(readFileSync('./package.json'));
 
 const banner = `/*!
 * ${name} v${version}
 * ${homepage}
  * (c) ${(new Date(process.env.SOURCE_DATE_EPOCH ? (process.env.SOURCE_DATE_EPOCH * 1000) : new Date().getTime())).getFullYear()} chartjs-plugin-annotation Contributors
- * Released under the MIT License
+ * Released under the ${license} License
  */`;
 
 const input = 'src/index.js';
@@ -21,7 +23,7 @@ const globals = {
   'chart.js/helpers': 'Chart.helpers'
 };
 
-module.exports = [
+export default [
   {
     input,
     plugins: [
@@ -30,7 +32,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: main,
+      file: main.replace('.esm.js', '.js'),
       banner,
       format: 'umd',
       indent: false,
@@ -51,7 +53,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: main.replace('.js', '.min.js'),
+      file: jsdelivr,
       format: 'umd',
       indent: false,
       globals
@@ -66,7 +68,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: _module,
+      file: main,
       banner,
       format: 'esm',
       indent: false
diff --git a/scripts/docs-config.sh b/scripts/docs-config.sh
index 25b3589d9..1d0895604 100755
--- a/scripts/docs-config.sh
+++ b/scripts/docs-config.sh
@@ -27,4 +27,4 @@ MODE=$2
 
 TAG=$(tag_from_version "$VERSION" "$MODE")
 
-sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.js"
+sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.ts"
diff --git a/test/seed-reporter.js b/test/seed-reporter.js
index 6328b0bcd..ca43b6755 100644
--- a/test/seed-reporter.js
+++ b/test/seed-reporter.js
@@ -8,6 +8,6 @@ const SeedReporter = function(baseReporterDecorator) {
   };
 };
 
-module.exports = {
+export default {
   'reporter:jasmine-seed': ['type', SeedReporter]
 };

From 116628b8248c709d6fea7576bf89217839d3c33f Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Thu, 26 Jan 2023 12:29:14 +0100
Subject: [PATCH 03/11] fix integration tests

---
 test/integration/integration-test.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/test/integration/integration-test.js b/test/integration/integration-test.js
index 6fbcc42c3..d5fc0f48d 100644
--- a/test/integration/integration-test.js
+++ b/test/integration/integration-test.js
@@ -1,11 +1,12 @@
 'use strict';
 
-const os = require('os');
-const fs = require('fs-extra');
-const path = require('path');
-const childProcess = require('child_process');
+import os from 'os';
+import fs from 'fs-extra';
+import path from 'path';
+import childProcess from 'child_process';
+import process from 'process';
 
-const {describe, it} = require('mocha');
+import {describe, it} from 'mocha';
 
 function exec(command, options = {}) {
   const output = childProcess.execSync(command, {
@@ -28,7 +29,7 @@ describe('Integration Tests', () => {
   );
 
   function testOnNodeProject(projectName) {
-    const projectPath = path.join(__dirname, projectName);
+    const projectPath = path.join(process.cwd(), 'test', 'integration', projectName);
 
     const packageJSONPath = path.join(projectPath, 'package.json');
     const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, 'utf-8'));

From aaf9e558fd47c396990113acf774c74734de4433 Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Fri, 27 Jan 2023 14:27:46 +0100
Subject: [PATCH 04/11] support commonjs

---
 karma.conf.cjs   |  2 +-
 package.json     | 12 +++++++++---
 rollup.config.js |  6 +++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/karma.conf.cjs b/karma.conf.cjs
index 9ae4b7676..80aa1066b 100644
--- a/karma.conf.cjs
+++ b/karma.conf.cjs
@@ -15,7 +15,7 @@ module.exports = async function(karma) {
   // make sure that the minification process (terser) doesn't break anything.
   const builds = (await import('./rollup.config.js')).default;
   const jasmineSeedReporter = (await import('./test/seed-reporter.js')).default;
-  const regex = karma.autoWatch ? /chartjs-plugin-annotation\.js$/ : /chartjs-plugin-annotation\.min\.js$/;
+  const regex = karma.autoWatch ? /chartjs-plugin-annotation\.cjs$/ : /chartjs-plugin-annotation\.min\.js$/;
   const build = builds.filter(v => v.output.file && v.output.file.match(regex))[0];
 
   if (env === 'test') {
diff --git a/package.json b/package.json
index 9c7f5a851..7979ef326 100644
--- a/package.json
+++ b/package.json
@@ -6,22 +6,28 @@
   "author": "Evert Timberg <evert.timberg@gmail.com>",
   "license": "MIT",
   "type": "module",
-  "main": "dist/chartjs-plugin-annotation.esm.js",
+  "main": "dist/chartjs-plugin-annotation.cjs",
+  "module": "dist/chartjs-plugin-annotation.esm.js",
   "types": "types/index.d.ts",
   "jsdelivr": "dist/chartjs-plugin-annotation.min.js",
   "unpkg": "dist/chartjs-plugin-annotation.min.js",
   "exports": {
     "types": "./types/index.d.ts",
     "import": "./dist/chartjs-plugin-annotation.esm.js",
-    "require": "./dist/chartjs-plugin-annotation.min.js",
+    "require": "./dist/chartjs-plugin-annotation.cjs",
     "script": "./dist/chartjs-plugin-annotation.min.js"
   },
+  "sideEffects": [
+    "dist/chartjs-plugin-annotation.cjs",
+    "dist/chartjs-plugin-annotation-min.js"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/chartjs/chartjs-plugin-annotation.git"
   },
   "files": [
-    "dist/*.js",
+    "dist/*",
+    "!dist/docs/**",
     "types/*.d.ts"
   ],
   "scripts": {
diff --git a/rollup.config.js b/rollup.config.js
index 16e709814..d829f401f 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,7 +3,7 @@ import terser from '@rollup/plugin-terser';
 import json from '@rollup/plugin-json';
 import {readFileSync} from 'fs';
 
-const {name, version, homepage, main, license, jsdelivr} = JSON.parse(readFileSync('./package.json'));
+const {name, version, homepage, main, module, license, jsdelivr} = JSON.parse(readFileSync('./package.json'));
 
 const banner = `/*!
 * ${name} v${version}
@@ -32,7 +32,7 @@ export default [
     ],
     output: {
       name,
-      file: main.replace('.esm.js', '.js'),
+      file: main,
       banner,
       format: 'umd',
       indent: false,
@@ -68,7 +68,7 @@ export default [
     ],
     output: {
       name,
-      file: main,
+      file: module,
       banner,
       format: 'esm',
       indent: false

From 074e022c6aa21855424c9cdb35857ad9afe7d51e Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Mon, 30 Jan 2023 14:01:20 +0100
Subject: [PATCH 05/11] fixes typo

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7979ef326..e13e9f31b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "sideEffects": [
     "dist/chartjs-plugin-annotation.cjs",
-    "dist/chartjs-plugin-annotation-min.js"
+    "dist/chartjs-plugin-annotation.min.js"
   ],
   "repository": {
     "type": "git",

From eb083dd08791806d81752696f278f934b1cbd573 Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Wed, 1 Mar 2023 12:36:58 +0100
Subject: [PATCH 06/11] add integration tests for node module and commonjs

---
 package.json                                |  2 +-
 test/integration/integration-test.js        |  3 +-
 test/integration/node-commonjs/package.json | 12 ++++++++
 test/integration/node-commonjs/test.js      | 32 +++++++++++++++++++++
 test/integration/node-module/package.json   | 13 +++++++++
 test/integration/node-module/test.js        | 32 +++++++++++++++++++++
 test/integration/ts/package.json            |  8 ++++--
 7 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 test/integration/node-commonjs/package.json
 create mode 100644 test/integration/node-commonjs/test.js
 create mode 100644 test/integration/node-module/package.json
 create mode 100644 test/integration/node-module/test.js

diff --git a/package.json b/package.json
index c5a85458b..6ec1edeb1 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "test-karma": "karma start ./karma.conf.cjs --auto-watch --single-run",
     "test-lint": "npm run lint",
     "test-types": "tsc -p types/tests/",
-    "test-types-integration": "mocha --full-trace test/integration/*-test.js"
+    "test-integration": "mocha --full-trace test/integration/*-test.js"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.0.0",
diff --git a/test/integration/integration-test.js b/test/integration/integration-test.js
index d5fc0f48d..ecd9716c9 100644
--- a/test/integration/integration-test.js
+++ b/test/integration/integration-test.js
@@ -42,6 +42,7 @@ describe('Integration Tests', () => {
       exec('npm --quiet test', {cwd, stdio: 'inherit'});
     }).timeout(5 * 60 * 1000);
   }
-
   testOnNodeProject('ts');
+  testOnNodeProject('node-module');
+  testOnNodeProject('node-commonjs');
 });
diff --git a/test/integration/node-commonjs/package.json b/test/integration/node-commonjs/package.json
new file mode 100644
index 000000000..b3aac0b53
--- /dev/null
+++ b/test/integration/node-commonjs/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "description": "chartjs-plugin-annotation should work in Node, using commonjs",
+  "scripts": {
+    "test": "node test.js"
+  },
+  "dependencies": {
+    "@napi-rs/canvas": "^0.1.30",
+    "chart.js": "^4.2.1",
+    "chartjs-plugin-annotation": "file:../plugin.tgz"
+  }
+}
diff --git a/test/integration/node-commonjs/test.js b/test/integration/node-commonjs/test.js
new file mode 100644
index 000000000..0d32ef071
--- /dev/null
+++ b/test/integration/node-commonjs/test.js
@@ -0,0 +1,32 @@
+const {createCanvas} = require('@napi-rs/canvas');
+const {Chart, BarController, BarElement, CategoryScale, LinearScale} = require('chart.js');
+const Annotation = require('chartjs-plugin-annotation');
+
+Chart.register(BarController, BarElement, CategoryScale, LinearScale);
+Chart.register(Annotation);
+
+const canvas = createCanvas(300, 320);
+const ctx = canvas.getContext('2d');
+
+// Chart.js assumes ctx contains the canvas
+ctx.canvas = canvas;
+
+module.export = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: [],
+    datasets: [{
+      data: []
+    }]
+  },
+  options: {
+    plugins: {
+      annotation: {
+        clip: false,
+        annotations: []
+      }
+    }
+  },
+  plugins: [Annotation]
+});
+
diff --git a/test/integration/node-module/package.json b/test/integration/node-module/package.json
new file mode 100644
index 000000000..6c24ee236
--- /dev/null
+++ b/test/integration/node-module/package.json
@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "description": "chartjs-plugin-annotation should work in Node, using module",
+  "type": "module",
+  "scripts": {
+    "test": "node test.js"
+  },
+  "dependencies": {
+    "@napi-rs/canvas": "^0.1.30",
+    "chart.js": "^4.2.1",
+    "chartjs-plugin-annotation": "file:../plugin.tgz"
+  }
+}
diff --git a/test/integration/node-module/test.js b/test/integration/node-module/test.js
new file mode 100644
index 000000000..ebdcbbf91
--- /dev/null
+++ b/test/integration/node-module/test.js
@@ -0,0 +1,32 @@
+import {createCanvas} from '@napi-rs/canvas';
+import {Chart, BarController, BarElement, CategoryScale, LinearScale} from 'chart.js';
+import Annotation from 'chartjs-plugin-annotation';
+
+Chart.register(BarController, BarElement, CategoryScale, LinearScale);
+Chart.register(Annotation);
+
+const canvas = createCanvas(300, 320);
+const ctx = canvas.getContext('2d');
+
+// Chart.js assumes ctx contains the canvas
+ctx.canvas = canvas;
+
+export const chart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: [],
+    datasets: [{
+      data: []
+    }]
+  },
+  options: {
+    plugins: {
+      annotation: {
+        clip: false,
+        annotations: []
+      }
+    }
+  },
+  plugins: [Annotation]
+});
+
diff --git a/test/integration/ts/package.json b/test/integration/ts/package.json
index 39b929587..7d8d91a61 100644
--- a/test/integration/ts/package.json
+++ b/test/integration/ts/package.json
@@ -5,13 +5,15 @@
     "test": "node test.js"
   },
   "dependencies": {
-    "chart.js": "^3.1.0",
+    "chart.js": "^4.2.1",
     "chartjs-plugin-annotation": "file:../plugin.tgz",
-    "typescript-4.1": "npm:typescript@4.1.x",
     "typescript-4.2": "npm:typescript@4.2.x",
     "typescript-4.3": "npm:typescript@4.3.x",
     "typescript-4.4": "npm:typescript@4.4.x",
     "typescript-4.5": "npm:typescript@4.5.x",
-    "typescript-4.6": "npm:typescript@4.6.x"
+    "typescript-4.6": "npm:typescript@4.6.x",
+    "typescript-4.7": "npm:typescript@4.7.x",
+    "typescript-4.8": "npm:typescript@4.8.x",
+    "typescript-4.9": "npm:typescript@4.9.x"
   }
 }

From 87f9191914efe28fcc79660ee4a2fe3ec440d5b2 Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Thu, 2 Mar 2023 11:20:17 +0100
Subject: [PATCH 07/11] add chartjs-plugin-annotation.js creation

---
 rollup.config.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/rollup.config.js b/rollup.config.js
index d829f401f..ee1b69012 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -24,6 +24,7 @@ const globals = {
 };
 
 export default [
+  // cjs
   {
     input,
     plugins: [
@@ -40,6 +41,24 @@ export default [
     },
     external
   },
+  // js
+  {
+    input,
+    plugins: [
+      json(),
+      resolve(),
+    ],
+    output: {
+      name,
+      file: main.replace('.cjs', '.js'),
+      banner,
+      format: 'umd',
+      indent: false,
+      globals
+    },
+    external
+  },
+  // min.js
   {
     input,
     plugins: [
@@ -60,6 +79,7 @@ export default [
     },
     external
   },
+  // ems.js
   {
     input: inputESM,
     plugins: [

From ed6ef16338c4d5e2e2226bd3cb8a354731167dc4 Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Wed, 15 Mar 2023 12:30:13 +0100
Subject: [PATCH 08/11] remove build of plugin.js

---
 rollup.config.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index ee1b69012..9236cbc60 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -41,23 +41,6 @@ export default [
     },
     external
   },
-  // js
-  {
-    input,
-    plugins: [
-      json(),
-      resolve(),
-    ],
-    output: {
-      name,
-      file: main.replace('.cjs', '.js'),
-      banner,
-      format: 'umd',
-      indent: false,
-      globals
-    },
-    external
-  },
   // min.js
   {
     input,

From 9732661b340c95e64ddb2f645fed4b47d13afd5d Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Thu, 16 Mar 2023 23:13:39 +0100
Subject: [PATCH 09/11] change chart.js peerDependencies

---
 README.md    | 7 +++++--
 package.json | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 309326f79..d7cc457bf 100644
--- a/README.md
+++ b/README.md
@@ -7,18 +7,21 @@
 [![documentation](https://img.shields.io/static/v1?message=Documentation&color=informational)](https://www.chartjs.org/chartjs-plugin-annotation/index)
 <a href="https://github.com/chartjs/awesome"><img src="https://awesome.re/badge-flat2.svg" alt="Awesome"></a>
 
-An annotation plugin for Chart.js >= 3.7.0
+An annotation plugin for Chart.js >= 4.0.0
 
 ---
 > This plugin needs to be registered. It does not function as inline plugin.
 ---
 
+An annotation plugin for Chart.js >= 3.7.0
+
+For Chart.js 3.7.0 to 3.9.1 support, use [version 2.2.1 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v2.2.1)
 For Chart.js 3.0.0 to 3.6.2 support, use [version 1.4.0 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v1.4.0)
 For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7)
 
 This plugin draws lines, boxes, points, labels, polygons and ellipses on the chart area.
 
-Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts.
+Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have two or more axes, including pie, radar, and polar area charts.
 
 ![Example Screenshot](docs/guide/banner.png)
 
diff --git a/package.json b/package.json
index 628667b76..d8b26e6f0 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,6 @@
     "vuepress-theme-chartjs": "^0.2.0"
   },
   "peerDependencies": {
-    "chart.js": ">=3.7.0"
+    "chart.js": ">=4.0.0"
   }
 }

From dd96be40526addcf78def7ef1dff101a7a7ce50b Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Thu, 16 Mar 2023 23:48:09 +0100
Subject: [PATCH 10/11] add doc referring to chart.js version 4 as required

---
 README.md                 |  4 ++--
 docs/.vuepress/config.ts  | 11 +++++++++--
 docs/guide/index.md       |  7 ++++++-
 docs/guide/integration.md |  2 +-
 docs/guide/migrationV1.md |  2 +-
 docs/guide/migrationV2.md |  4 ++--
 docs/guide/migrationV3.md |  8 ++++++++
 docs/index.md             |  2 +-
 package-lock.json         |  2 +-
 9 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 docs/guide/migrationV3.md

diff --git a/README.md b/README.md
index d7cc457bf..9202b5f0e 100644
--- a/README.md
+++ b/README.md
@@ -13,10 +13,10 @@ An annotation plugin for Chart.js >= 4.0.0
 > This plugin needs to be registered. It does not function as inline plugin.
 ---
 
-An annotation plugin for Chart.js >= 3.7.0
-
 For Chart.js 3.7.0 to 3.9.1 support, use [version 2.2.1 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v2.2.1)
+
 For Chart.js 3.0.0 to 3.6.2 support, use [version 1.4.0 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v1.4.0)
+
 For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7)
 
 This plugin draws lines, boxes, points, labels, polygons and ellipses on the chart area.
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 46f4ce403..eb7804e5b 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -134,8 +134,15 @@ export default defineConfig({
             'types/polygon'
           ]
         },
-        'migrationV1',
-        'migrationV2'
+        {
+          title: 'Migration',
+          collapsable: true,
+          children: [
+            'migrationV3',
+            'migrationV2',
+            'migrationV1'
+          ]
+        },
       ],
       '/samples/': [
         'intro',
diff --git a/docs/guide/index.md b/docs/guide/index.md
index e660ba4fe..77a17e77f 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -6,7 +6,7 @@ This plugin needs to be registered. It does not function as inline plugin.
 
 :::
 
-An annotation plugin for Chart.js >= 3.0.0
+An annotation plugin for Chart.js >= 4.0.0
 
 This plugin draws lines, boxes, labels, points, polygons and ellipses on the chart area. Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts.
 
@@ -20,7 +20,12 @@ This plugin draws lines, boxes, labels, points, polygons and ellipses on the cha
 
 ::: tip Important Note
 
+For Chart.js 3.7.0 to 3.9.1 support, use [version 2.2.1 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v2.2.1)
+
+For Chart.js 3.0.0 to 3.6.2 support, use [version 1.4.0 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v1.4.0)
+
 For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7)
+
 Documentation for v0.5.7 can be found on [GitHub](https://github.com/chartjs/chartjs-plugin-annotation/blob/1ab782afce943456f958cac33f67edc5d6eab278/README.md).
 
 :::
diff --git a/docs/guide/integration.md b/docs/guide/integration.md
index 17772221d..6c6ef1f2b 100644
--- a/docs/guide/integration.md
+++ b/docs/guide/integration.md
@@ -2,7 +2,7 @@
 title: Integration
 ---
 
-chartjs-plugin-annotation can be integrated with plain JavaScript or with different module loaders. The examples below show to load the plugin in different systems.
+**`chartjs-plugin-annotation`** can be integrated with plain JavaScript or with different module loaders. The examples below show to load the plugin in different systems.
 
 ## Script Tag
 
diff --git a/docs/guide/migrationV1.md b/docs/guide/migrationV1.md
index 4082542b6..36fa62b3b 100644
--- a/docs/guide/migrationV1.md
+++ b/docs/guide/migrationV1.md
@@ -1,6 +1,6 @@
 # 1.x Migration Guide
 
-`chartjs-plugin-annotation` plugin version 1 introduces a number of breaking changes in order to compatible with Chart.js 3 and to align with Chart.js 3 options.
+**`chartjs-plugin-annotation`** plugin version 1 introduces a number of breaking changes in order to compatible with Chart.js 3 and to align with Chart.js 3 options.
 
 ## Setup and installation
 
diff --git a/docs/guide/migrationV2.md b/docs/guide/migrationV2.md
index 907d317fb..bea41a6d6 100644
--- a/docs/guide/migrationV2.md
+++ b/docs/guide/migrationV2.md
@@ -1,6 +1,6 @@
-# 2.x Migration guide
+# 2.x Migration Guide
 
-`chartjs-plugin-annotation` plugin version 2 introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
+**`chartjs-plugin-annotation`** plugin version 2 introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
 
 ## Chart.js version
 
diff --git a/docs/guide/migrationV3.md b/docs/guide/migrationV3.md
new file mode 100644
index 000000000..369ec326d
--- /dev/null
+++ b/docs/guide/migrationV3.md
@@ -0,0 +1,8 @@
+# 3.x Migration Guide
+
+**`chartjs-plugin-annotation`** plugin version 3 becomes an [ESM-only package](https://nodejs.org/api/esm.html).
+The [UMD bundle](integration.md#script-tag) is still available.
+
+## Chart.js version
+
+The annotation plugin requires at least version 4.0.0 to work because of Chart.js becomes an ESM-only package.
diff --git a/docs/index.md b/docs/index.md
index 3681e6756..68aaeaf43 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -3,5 +3,5 @@ home: true
 heroImage: /hero.svg
 actionText: Get Started →
 actionLink: /guide/
-footer: MIT Licensed | Copyright © 2016-2021 chartjs-plugin-annotation contributors
+footer: MIT Licensed | Copyright © 2016-2023 chartjs-plugin-annotation contributors
 ---
diff --git a/package-lock.json b/package-lock.json
index 7b61d9c22..4d05d39b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,7 @@
         "vuepress-theme-chartjs": "^0.2.0"
       },
       "peerDependencies": {
-        "chart.js": ">=3.7.0"
+        "chart.js": ">=4.0.0"
       }
     },
     "node_modules/@ampproject/remapping": {

From e4df4f5cdd0eb9b60bfcb5f0b4dd80fb18eeaca4 Mon Sep 17 00:00:00 2001
From: stockiNail <stocki.nail@gmail.com>
Date: Thu, 23 Mar 2023 09:30:06 +0100
Subject: [PATCH 11/11] changes minimum chartjs version

---
 src/annotation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/annotation.js b/src/annotation.js
index 11c4687a5..006416329 100644
--- a/src/annotation.js
+++ b/src/annotation.js
@@ -17,7 +17,7 @@ export default {
   version,
 
   beforeRegister() {
-    requireVersion('chart.js', '3.7', Chart.version);
+    requireVersion('chart.js', '4.0', Chart.version);
   },
 
   afterRegister() {