Skip to content

Commit 049f4e2

Browse files
dangreendangreen
authored
docs: changes for v5 (#964)
1 parent 3db1a12 commit 049f4e2

File tree

5 files changed

+90
-387
lines changed

5 files changed

+90
-387
lines changed

‎README.md

Lines changed: 29 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
<img align="right" width="150" height="150" alt="vue-chartjs logo" src="https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/vue-chartjs.png">
44

5-
**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
5+
**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reuseable chart components.
66

7-
Supports Chart.js v3 and v2.
7+
Supports Chart.js v4.
88

99
[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
1010
[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
@@ -31,7 +31,7 @@ Supports Chart.js v3 and v2.
3131
<br />
3232
<hr />
3333

34-
## Install
34+
## Quickstart
3535

3636
Install this library with peer dependencies:
3737

@@ -43,95 +43,39 @@ yarn add vue-chartjs chart.js
4343
npm i vue-chartjs chart.js
4444
```
4545

46-
We recommend using `chart.js@^3.0.0`.
47-
48-
<hr />
49-
50-
Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.
51-
52-
<br />
53-
54-
[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-vue-chartjs)
55-
56-
## How to use
57-
58-
This package works with version 2.x and 3.x of Vue.
59-
60-
Import the component.
61-
62-
```javascript
63-
import { Bar } from 'vue-chartjs'
64-
```
65-
66-
For Vue 2 projects, you need to import from `vue-chartjs/legacy`.
67-
68-
```javascript
69-
import { Bar } from 'vue-chartjs/legacy'
70-
```
71-
72-
Just create your own component.
46+
Then, import and use individual components:
7347

7448
```vue
7549
<template>
76-
<Bar
77-
:chart-options="chartOptions"
78-
:chart-data="chartData"
79-
:chart-id="chartId"
80-
:dataset-id-key="datasetIdKey"
81-
:plugins="plugins"
82-
:css-classes="cssClasses"
83-
:styles="styles"
84-
:width="width"
85-
:height="height"
86-
/>
50+
<Bar :data="data" :options="options" />
8751
</template>
8852
89-
<script>
53+
<script lang="ts">
54+
import {
55+
Chart as ChartJS,
56+
Title,
57+
Tooltip,
58+
Legend,
59+
BarElement,
60+
CategoryScale,
61+
LinearScale
62+
} from 'chart.js'
9063
import { Bar } from 'vue-chartjs'
91-
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
9264
93-
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
65+
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
9466
9567
export default {
96-
name: 'BarChart',
97-
components: { Bar },
98-
props: {
99-
chartId: {
100-
type: String,
101-
default: 'bar-chart'
102-
},
103-
datasetIdKey: {
104-
type: String,
105-
default: 'label'
106-
},
107-
width: {
108-
type: Number,
109-
default: 400
110-
},
111-
height: {
112-
type: Number,
113-
default: 400
114-
},
115-
cssClasses: {
116-
default: '',
117-
type: String
118-
},
119-
styles: {
120-
type: Object,
121-
default: () => {}
122-
},
123-
plugins: {
124-
type: Array,
125-
default: () => []
126-
}
68+
name: 'App',
69+
components: {
70+
Bar
12771
},
12872
data() {
12973
return {
130-
chartData: {
131-
labels: [ 'January', 'February', 'March' ],
132-
datasets: [ { data: [40, 20, 12] } ]
74+
data: {
75+
labels: ['January', 'February', 'March'],
76+
datasets: [{ data: [40, 20, 12] }]
13377
},
134-
chartOptions: {
78+
options: {
13579
responsive: true
13680
}
13781
}
@@ -140,91 +84,19 @@ export default {
14084
</script>
14185
```
14286

143-
or in TypeScript
144-
145-
```ts
146-
// BarChart.ts
147-
import { defineComponent, h, PropType } from 'vue'
148-
import { Bar } from 'vue-chartjs'
149-
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Plugin } from 'chart.js'
150-
151-
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
152-
153-
export default defineComponent({
154-
name: 'BarChart',
155-
components: { Bar },
156-
props: {
157-
chartId: {
158-
type: String,
159-
default: 'bar-chart'
160-
},
161-
width: {
162-
type: Number,
163-
default: 400
164-
},
165-
height: {
166-
type: Number,
167-
default: 400
168-
},
169-
cssClasses: {
170-
default: '',
171-
type: String
172-
},
173-
styles: {
174-
type: Object as PropType<Partial<CSSStyleDeclaration>>,
175-
default: () => {}
176-
},
177-
plugins: {
178-
type: Array as PropType<Plugin<'bar'>[]>,
179-
default: () => []
180-
}
181-
},
182-
setup(props) {
183-
const chartData = {
184-
labels: [ 'January', 'February', 'March' ],
185-
datasets: [ { data: [40, 20, 12] } ]
186-
}
187-
188-
const chartOptions = { responsive: true }
189-
190-
return () =>
191-
h(Bar, {
192-
chartData,
193-
chartOptions,
194-
chartId: props.chartId,
195-
width: props.width,
196-
height: props.height,
197-
cssClasses: props.cssClasses,
198-
styles: props.styles,
199-
plugins: props.plugins
200-
})
201-
}
202-
})
203-
204-
```
205-
206-
Use it in your vue app
87+
<hr />
20788

208-
```vue
209-
<template>
210-
<BarChart />
211-
</template>
89+
Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.
21290

213-
<script>
214-
import BarChart from 'path/to/component/BarChart'
91+
<br />
21592

216-
export default {
217-
name: 'App',
218-
components: { BarChart }
219-
}
220-
</script>
221-
```
93+
[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-vue-chartjs)
22294

22395
## Docs
22496

22597
- [Reactivity](https://vue-chartjs.org/guide/#updating-charts)
22698
- [Access to Chart instance](https://vue-chartjs.org/guide/#access-to-chart-instance)
227-
- [Migration from v3 to v4](https://vue-chartjs.org/migration-guides/#migration-from-v3-to-v4/)
99+
- [Migration from v4 to v5](https://vue-chartjs.org/migration-guides/#migration-from-v4-to-v5/)
228100
- [Migration from vue-chart-3](https://vue-chartjs.org/migration-guides/#migration-from-vue-chart-3/)
229101
- [API](https://vue-chartjs.org/api/)
230102
- [Examples](https://vue-chartjs.org/examples/)
@@ -239,7 +111,7 @@ pnpm install
239111
pnpm build
240112

241113
# run unit tests
242-
pnpm unit
114+
pnpm test:unit
243115

244116
# run all tests
245117
pnpm test

‎website/src/api/index.md

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,27 @@ There are some basic props defined in the components provided by `vue-chartjs`.
66

77
| Prop | Description |
88
|---|---|
9-
| chartData | Object with Chart data |
10-
| chartOptions | Object with Chart options |
11-
| datasetIdKey | Id key for Chart data datasets |
12-
| chartId | Id of the canvas |
13-
| width | Chart width |
14-
| height | Chart height |
15-
| cssClasses | String with css classes for the surrounding div |
16-
| styles | Object with css styles for the surrounding div container |
17-
| plugins | Array with Chart plugins |
9+
| data | The data object that is passed into the Chart.js chart |
10+
| options | The options object that is passed into the Chart.js chart |
11+
| datasetIdKey | Key name to identificate dataset |
12+
| plugins | The plugins array that is passed into the Chart.js chart |
13+
| updateMode | A mode string to indicate transition configuration should be used. |
1814

19-
## Events
20-
21-
Charts will emit events if the data changes. You can listen to them in the chart component. The following events are available:
22-
23-
| Event | Description|
24-
|---|---|
25-
| `chart:rendered` | if the chart object instance rendered |
26-
| `chart:destroyed` | if the chart object instance removed |
27-
| `chart:updated` | if the update handler performs an update instead of a re-render |
28-
| `labels:updated` | if new labels were set |
15+
Rest props will fall through to the canvas element.
2916

3017
## Global Methods
3118

3219
Global Methods need to be imported.
3320

34-
### generateChart
21+
### createTypedChart
3522

3623
- **Type:** `Function`
37-
- **Arguments**: `chart-id`, `chart-type`, `chart-controller`
24+
- **Arguments**:`chart-type`, `chart-controller`
3825
- **Usage:**
3926

4027
```js
41-
import { generateChart } from 'vue-chartjs'
28+
import { createTypedChart } from 'vue-chartjs'
4229
import { LineController } from 'chart.js'
43-
// The first argument is the chart-id, the second the chart type, third is the custom controller
44-
const CustomLine = generateChart('custom-line', 'line', LineController)
30+
31+
const CustomLine = createTypedChart('line', LineController)
4532
```

‎website/src/examples/index.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22

33
## Vue 3 charts
44

5-
- [Bar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/bar)
6-
- [Bubble](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/bubble)
7-
- [Doughnut](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/doughnut)
8-
- [Line](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/line)
9-
- [Pie](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/pie)
10-
- [PolarArea](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/polar-area)
11-
- [Radar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/radar)
12-
- [Scatter](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/scatter)
13-
- [Bar with reactive prop](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/reactive-prop)
14-
- [Bar with reactive data](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/reactive)
15-
- [Custom chart](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/custom)
5+
- [Bar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/bar)
6+
- [Bubble](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/bubble)
7+
- [Doughnut](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/doughnut)
8+
- [Line](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/line)
9+
- [Pie](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/pie)
10+
- [PolarArea](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/polar-area)
11+
- [Radar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/radar)
12+
- [Scatter](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/scatter)
13+
- [Bar with reactive data](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/reactive)
14+
- [Custom chart](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/custom)
15+
- [Events](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/events)
1616

17-
## Vue 2 charts
17+
## Vue 2 charts (vue-chartjs v4)
1818

1919
- [Bar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/bar)
2020
- [Bubble](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/bubble)

0 commit comments

Comments
 (0)