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