Skip to content

Commit abce7dd

Browse files
authored
docs: add guide for migration from vue-chart-3 (#856)
1 parent 604c584 commit abce7dd

File tree

4 files changed

+62
-10
lines changed

4 files changed

+62
-10
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,8 @@ export default {
224224

225225
- [Reactivity](https://vue-chartjs.org/guide/#updating-charts)
226226
- [Access to Chart instance](https://vue-chartjs.org/guide/#access-to-chart-instance)
227-
- [Migration to v4](https://vue-chartjs.org/migration-to-v4/)
227+
- [Migration from v3 to v4](https://vue-chartjs.org/migration-guides/#migration-from-v3-to-v4/)
228+
- [Migration from vue-chart-3](https://vue-chartjs.org/migration-guides/#migration-from-vue-chart-3/)
228229
- [API](https://vue-chartjs.org/api/)
229230
- [Examples](https://vue-chartjs.org/examples/)
230231

website/src/.vitepress/config.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ export default defineConfig({
1919
nav: [
2020
{ text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
2121
{
22-
text: 'Migration to V4',
23-
link: '/migration-to-v4/',
24-
activeMatch: '^/migration-to-v4/'
22+
text: 'Migration guides',
23+
link: '/migration-guides/',
24+
activeMatch: '^/migration-guides/'
2525
},
2626
{
2727
text: 'API',

website/src/guide/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ Also you can get access to **updateChart** function
259259
this.$refs.bar.updateChart()
260260
```
261261

262-
### Events
262+
## Events
263263

264264
Charts will emit events if the data changes. You can listen to them in the chart component. The following events are available:
265265

@@ -268,7 +268,7 @@ Charts will emit events if the data changes. You can listen to them in the chart
268268
- `chart:updated` - if the update handler performs an update instead of a re-render
269269
- `labels:updated` - if new labels were set
270270

271-
### chartjs-plugin-annotation
271+
## chartjs-plugin-annotation
272272

273273
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.
274274

website/src/migration-to-v4/index.md renamed to website/src/migration-guides/index.md

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Migration to v4
1+
## Migration from v3 to v4
22

33
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.
44

55
v4 is fully compatible with Chart.js v3.
66

7-
## Tree-shaking
7+
### Tree-shaking
88

99
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.
1010

@@ -43,7 +43,7 @@ import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } f
4343
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
4444
```
4545

46-
## Changing the creation of Charts
46+
### Changing the creation of Charts
4747

4848
In v3, you needed to import the component, and then either use extends or mixins and add it.
4949

@@ -121,7 +121,7 @@ export default {
121121
</script>
122122
```
123123

124-
## New reactivity system
124+
### New reactivity system
125125

126126
v3 does not update or re-render the chart if new data is passed. You needed to use `reactiveProp` and `reactiveData` mixins for that.
127127

@@ -165,3 +165,54 @@ export default {
165165
}
166166
</script>
167167
```
168+
169+
## Migration from vue-chart-3
170+
171+
### Uninstall vue-chart-3
172+
173+
```bash
174+
pnpm rm vue-chart-3
175+
# or
176+
yarn remove vue-chart-3
177+
# or
178+
npm uninstall vue-chart-3
179+
```
180+
181+
### Install vue-chartjs
182+
183+
```bash
184+
pnpm add vue-chartjs
185+
# or
186+
yarn add vue-chartjs
187+
# or
188+
npm i vue-chartjs
189+
```
190+
191+
### Change component import path
192+
193+
For Vue 3 projects:
194+
195+
```javascript
196+
import { /* component */ } from 'vue-chartjs'
197+
```
198+
199+
For Vue 2 projects:
200+
201+
```javascript
202+
import { /* component */ } from 'vue-chartjs/legacy'
203+
```
204+
205+
### Rename components
206+
207+
- BarChart to Bar
208+
- DoughnutChart to Doughnut
209+
- LineChart to Line
210+
- PieChart to Pie
211+
- PolarAreaChart to PolarArea
212+
- RadarChart to Radar
213+
- BubbleChart to Bubble
214+
- ScatterChart to Scatter
215+
216+
### Rename props
217+
218+
- options to chartOptions

0 commit comments

Comments
 (0)