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
|
||||
|
||||
Reference in New Issue
Block a user