@@ -100,20 +100,66 @@ However you can simply implement this by your own or use one of the two mixins w
100
100
- ` reactiveProp `
101
101
- ` reactiveData `
102
102
103
+ Both are included in the ` mixins ` module.
104
+
103
105
The mixins automatically create ` chartData ` as a prop or data. And add a watcher. If data has changed, the chart will update.
104
106
105
107
``` javascript
106
108
// MonthlyIncome.js
107
- import { Line , reactiveProp } from ' vue-chartjs'
109
+ import { Line , mixins } from ' vue-chartjs'
108
110
109
111
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 ],
111
144
props: [" chartData" , " options" ],
112
145
mounted () {
113
146
this .renderChart (this .chartData , this .options )
114
147
}
115
148
})
149
+ ```
116
150
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
+ })
117
163
```
118
164
119
165
## Available Charts
0 commit comments