diff --git a/README.md b/README.md index 8cf95237..fb3d5dae 100644 --- a/README.md +++ b/README.md @@ -224,7 +224,8 @@ export default { - [Reactivity](https://vue-chartjs.org/guide/#updating-charts) - [Access to Chart instance](https://vue-chartjs.org/guide/#access-to-chart-instance) -- [Migration to v4](https://vue-chartjs.org/migration-to-v4/) +- [Migration from v3 to v4](https://vue-chartjs.org/migration-guides/#migration-from-v3-to-v4/) +- [Migration from vue-chart-3](https://vue-chartjs.org/migration-guides/#migration-from-vue-chart-3/) - [API](https://vue-chartjs.org/api/) - [Examples](https://vue-chartjs.org/examples/) diff --git a/website/src/.vitepress/config.ts b/website/src/.vitepress/config.ts index 8de4473d..c1c512ce 100644 --- a/website/src/.vitepress/config.ts +++ b/website/src/.vitepress/config.ts @@ -19,9 +19,9 @@ export default defineConfig({ nav: [ { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' }, { - text: 'Migration to V4', - link: '/migration-to-v4/', - activeMatch: '^/migration-to-v4/' + text: 'Migration guides', + link: '/migration-guides/', + activeMatch: '^/migration-guides/' }, { text: 'API', diff --git a/website/src/guide/index.md b/website/src/guide/index.md index 5dfabd6f..03d18a89 100644 --- a/website/src/guide/index.md +++ b/website/src/guide/index.md @@ -259,7 +259,7 @@ Also you can get access to **updateChart** function this.$refs.bar.updateChart() ``` -### Events +## Events Charts will emit events if the data changes. You can listen to them in the chart component. The following events are available: @@ -268,7 +268,7 @@ Charts will emit events if the data changes. You can listen to them in the chart - `chart:updated` - if the update handler performs an update instead of a re-render - `labels:updated` - if new labels were set -### chartjs-plugin-annotation +## chartjs-plugin-annotation When using [chartjs-plugin-annotation](https://www.chartjs.org/chartjs-plugin-annotation/latest/) and **Vue 2** simultaneously, you will not be able to place multiple reactive charts on one page. diff --git a/website/src/migration-to-v4/index.md b/website/src/migration-guides/index.md similarity index 83% rename from website/src/migration-to-v4/index.md rename to website/src/migration-guides/index.md index 23b50d54..cfd61f22 100644 --- a/website/src/migration-to-v4/index.md +++ b/website/src/migration-guides/index.md @@ -1,10 +1,10 @@ -# Migration to v4 +## Migration from v3 to v4 With v4, this library 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. v4 is fully compatible with Chart.js v3. -## Tree-shaking +### Tree-shaking v4 of this library, [just like Chart.js v3](https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#setup-and-installation), is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use. @@ -43,7 +43,7 @@ import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } f ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) ``` -## Changing the creation of Charts +### Changing the creation of Charts In v3, you needed to import the component, and then either use extends or mixins and add it. @@ -121,7 +121,7 @@ export default { ``` -## New reactivity system +### New reactivity system v3 does not update or re-render the chart if new data is passed. You needed to use `reactiveProp` and `reactiveData` mixins for that. @@ -165,3 +165,54 @@ export default { } ``` + +## Migration from vue-chart-3 + +### Uninstall vue-chart-3 + +```bash +pnpm rm vue-chart-3 +# or +yarn remove vue-chart-3 +# or +npm uninstall vue-chart-3 +``` + +### Install vue-chartjs + +```bash +pnpm add vue-chartjs +# or +yarn add vue-chartjs +# or +npm i vue-chartjs +``` + +### Change component import path + +For Vue 3 projects: + +```javascript +import { /* component */ } from 'vue-chartjs' +``` + +For Vue 2 projects: + +```javascript +import { /* component */ } from 'vue-chartjs/legacy' +``` + +### Rename components + +- BarChart to Bar +- DoughnutChart to Doughnut +- LineChart to Line +- PieChart to Pie +- PolarAreaChart to PolarArea +- RadarChart to Radar +- BubbleChart to Bubble +- ScatterChart to Scatter + +### Rename props + +- options to chartOptions