Skip to content

Commit 4badb99

Browse files
committed
📝 Update README
1 parent 3101945 commit 4badb99

File tree

1 file changed

+48
-2
lines changed

1 file changed

+48
-2
lines changed

README.md

+48-2
Original file line numberDiff line numberDiff line change
@@ -100,20 +100,66 @@ However you can simply implement this by your own or use one of the two mixins w
100100
- `reactiveProp`
101101
- `reactiveData`
102102

103+
Both are included in the `mixins` module.
104+
103105
The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
104106

105107
```javascript
106108
// MonthlyIncome.js
107-
import { Line, reactiveProp } from 'vue-chartjs'
109+
import { Line, mixins } from 'vue-chartjs'
108110

109111
export default Line.extend({
110-
mixins: [reactiveProp],
112+
mixins: [mixins.reactiveProp],
113+
props: ["chartData", "options"],
114+
mounted () {
115+
this.renderChart(this.chartData, this.options)
116+
}
117+
})
118+
119+
```
120+
121+
### Mixins module
122+
The `mixins` module is included in the `VueCharts` module and as a seperate module.
123+
Some ways to import them:
124+
125+
```javascript
126+
// Load complete module with all charts
127+
import VueCharts from 'vue-chartjs'
128+
129+
export default VueCharts.Line.extend({
130+
mixins: [VueCharts.mixins.reactiveProp],
131+
props: ["chartData", "options"],
132+
mounted () {
133+
this.renderChart(this.chartData, this.options)
134+
}
135+
})
136+
```
137+
138+
```javascript
139+
// Load speperate modules
140+
import { Line, mixins } from 'vue-chartjs'
141+
142+
export default Line.extend({
143+
mixins: [mixins.reactiveProp],
111144
props: ["chartData", "options"],
112145
mounted () {
113146
this.renderChart(this.chartData, this.options)
114147
}
115148
})
149+
```
116150

151+
```javascript
152+
// Load speperate modules with destructure assign
153+
import { Line, mixins } from 'vue-chartjs'
154+
const { reactiveProp } = mixins
155+
156+
export default Line.extend({
157+
mixins: [reactiveProp],
158+
props: ["chartData", "options"],
159+
mounted () {
160+
this.renderChart(this.chartData, this.options)
161+
}
162+
})
117163
```
118164

119165
## Available Charts

0 commit comments

Comments
 (0)