mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
📝 Update README with reactive Data and props example
This commit is contained in:
28
README.md
28
README.md
@@ -36,7 +36,7 @@ Just create your own component.
|
|||||||
// CommitChart.js
|
// CommitChart.js
|
||||||
import { Bar } from 'vue-chartjs'
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
export default BarChart.extend({
|
export default Bar.extend({
|
||||||
mounted () {
|
mounted () {
|
||||||
// Overwriting base render method with actual data.
|
// Overwriting base render method with actual data.
|
||||||
this.renderChart({
|
this.renderChart({
|
||||||
@@ -67,7 +67,7 @@ You can overwrite the default chart options. Just pass the options object as a s
|
|||||||
// MonthlyIncome.js
|
// MonthlyIncome.js
|
||||||
import { Line } from 'vue-chartjs'
|
import { Line } from 'vue-chartjs'
|
||||||
|
|
||||||
export default LineChart.extend({
|
export default Line.extend({
|
||||||
props: [data, options],
|
props: [data, options],
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.data, this.options)
|
this.renderChart(this.data, this.options)
|
||||||
@@ -92,6 +92,30 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Reactivity
|
||||||
|
|
||||||
|
Chart.js does not update or re-render the chart if new data is passed.
|
||||||
|
However you can simply implement this by your own or use one of the two mixins which are included.
|
||||||
|
|
||||||
|
- `reactiveProp`
|
||||||
|
- `reactiveData`
|
||||||
|
|
||||||
|
The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// MonthlyIncome.js
|
||||||
|
import { Line, reactiveProp } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [reactiveProp]
|
||||||
|
props: [chartData, options],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
## Available Charts
|
## Available Charts
|
||||||
|
|
||||||
### Bar Chart
|
### Bar Chart
|
||||||
|
|||||||
Reference in New Issue
Block a user