mirror of
				https://github.com/KevinMidboe/vue-chartjs.git
				synced 2025-10-29 18:00:20 +00:00 
			
		
		
		
	📝 Update readme
This commit is contained in:
		
							
								
								
									
										41
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										41
									
								
								README.md
									
									
									
									
									
								
							| @@ -2,6 +2,47 @@ | ||||
|  | ||||
| > VueJS wrapper for ChartJs | ||||
|  | ||||
| ## How to use | ||||
|  | ||||
| You need to import the base chart class and extend it. This gives much more flexibility when working with different data. You can pass the data over props or vue-resource. | ||||
|  | ||||
| ```javascript | ||||
| // CommitChart.js | ||||
| import BarChart from '../BaseCharts/Bar' | ||||
|  | ||||
| export default BarChart.extend({ | ||||
|   ready () { | ||||
|     this.render({ | ||||
|       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], | ||||
|       datasets: [ | ||||
|         { | ||||
|           label: 'GitHub Commits', | ||||
|           backgroundColor: '#f87979', | ||||
|           data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] | ||||
|         } | ||||
|       ] | ||||
|     }) | ||||
|   } | ||||
| }) | ||||
| ``` | ||||
|  | ||||
| Then simply import and use your own extended component and use it like a normal vue component | ||||
|  | ||||
| ```javascript | ||||
| import CommitChart from 'path/to/component/CommitChart' | ||||
| ``` | ||||
|  | ||||
|  | ||||
| ## Available ChartJ | ||||
|  | ||||
| ### Bar Chart | ||||
|  | ||||
|  | ||||
|  | ||||
| ### Line Chart | ||||
|  | ||||
|  | ||||
|  | ||||
| ## Build Setup | ||||
|  | ||||
| ``` bash | ||||
|   | ||||
							
								
								
									
										
											BIN
										
									
								
								src/assets/bar.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/bar.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 70 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/line.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/line.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 76 KiB | 
		Reference in New Issue
	
	Block a user