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