docs: add info about major update (#1114)

Author: dangreen

README.md

@@ -4,7 +4,7 @@
 
 React components for <a href="https://www.chartjs.org">Chart.js</a>, the most popular charting library.
 
-Supports Chart.js v3 and v2.
+Supports Chart.js v4 and v3.
 
 [![NPM version][npm]][npm-url]
 [![Downloads][downloads]][downloads-url]
@@ -50,7 +50,7 @@ yarn add react-chartjs-2 chart.js
 npm i react-chartjs-2 chart.js
 ```
 
-We recommend using `chart.js@^3.0.0`.
+We recommend using `chart.js@^4.0.0`.
 
 Then, import and use individual components:
 

website/docs/chartjs-v2.mdx

@@ -44,21 +44,21 @@ First, upgrade packages. You'll need to install Chart.js v3 and the latest versi
   <TabItem value="yarn" default>
 
   ```bash
-  yarn add chart.js@^3.6.0 react-chartjs-2@latest
+  yarn add chart.js@^3.6.0 react-chartjs-2@^4.0.0
   ```
 
   </TabItem>
   <TabItem value="pnpm">
 
   ```bash
-  pnpm add chart.js@^3.6.0 react-chartjs-2@latest
+  pnpm add chart.js@^3.6.0 react-chartjs-2@^4.0.0
   ```
 
   </TabItem>
   <TabItem value="npm">
 
   ```bash
-  npm install --save chart.js@^3.6.0 react-chartjs-2@latest
+  npm install --save chart.js@^3.6.0 react-chartjs-2@^4.0.0
   ```
 
   </TabItem>

website/docs/chartjs-v3.mdx

@@ -0,0 +1,67 @@
+---
+slug: /docs/chartjs-v3
+description: Using react-chartjs-2 with Chart.js v3
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Using with Chart.js v3
+
+If your app needs [Chart.js v3](https://www.chartjs.org/docs/3.9.1/), please use a [compatible version](https://www.npmjs.com/package/react-chartjs-2/v/4.3.1) of this library:
+
+<Tabs>
+  <TabItem value="yarn" default>
+
+  ```bash
+  yarn add chart.js@^3.9.1 react-chartjs-2@^4.3.1
+  ```
+
+  </TabItem>
+  <TabItem value="pnpm">
+
+  ```bash
+  pnpm add chart.js@^3.9.1 react-chartjs-2@^4.3.1
+  ```
+
+  </TabItem>
+  <TabItem value="npm">
+
+  ```bash
+  npm install --save chart.js@^3.9.1 react-chartjs-2@^4.3.1
+  ```
+
+  </TabItem>
+</Tabs>
+
+Also, please consider upgrading your app to [Chart.js v3](#upgrading-to-chartjs-v3).
+
+## Upgrading to Chart.js v4
+
+First, upgrade packages. You'll need to install Chart.js v3 and the latest version of this library:
+
+<Tabs>
+  <TabItem value="yarn" default>
+
+  ```bash
+  yarn add chart.js@^4.0.0 react-chartjs-2@^5.0.0
+  ```
+
+  </TabItem>
+  <TabItem value="pnpm">
+
+  ```bash
+  pnpm add chart.js@^4.0.0 react-chartjs-2@^5.0.0
+  ```
+
+  </TabItem>
+  <TabItem value="npm">
+
+  ```bash
+  npm install --save chart.js@^4.0.0 react-chartjs-2@^5.0.0
+  ```
+
+  </TabItem>
+</Tabs>
+
+Then, please follow the [this guide](/docs/migration-to-v5).

website/docs/docs.js

@@ -1,6 +1,8 @@
 exports.docs = [
+  { title: 'Migration to v5', slug: '/docs/migration-to-v5' },
   { title: 'Migration to v4', slug: '/docs/migration-to-v4' },
   { title: 'Working with datasets', slug: '/docs/working-with-datasets' },
   { title: 'Working with events', slug: '/docs/working-with-events' },
+  { title: 'Using with Chart.js v3', slug: '/docs/chartjs-v3' },
   { title: 'Using with Chart.js v2', slug: '/docs/chartjs-v2' },
 ];

website/docs/index.mdx

@@ -13,7 +13,7 @@ import Logo from '@site/static/img/logo.svg';
 
 React components for [Chart.js](https://www.chartjs.org), the most popular charting library.
 
-Supports Chart.js v3 (read below) and Chart.js v2 (see [this guide](/docs/chartjs-v2)).
+Supports Chart.js v4 (read below) and Chart.js v3 (see [this guide](/docs/chartjs-v3)).
 
 [![NPM version][npm]][npm-url]
 [![Downloads][downloads]][downloads-url]

website/docs/migration-to-v5.md

@@ -0,0 +1,14 @@
+---
+slug: /docs/migration-to-v5
+description: react-chartjs-2 migration guide to v5
+---
+
+# Migration to v5
+
+Chart.js v4 and react-chartjs-2 v5 are [ESM-only packages](https://nodejs.org/api/esm.html). To use them in your project, it also should be ESM:
+
+```json title="package.json"
+{
+  "type": "module"
+}
+```