https://github.com/lakb248/vue-chartist
A component of Chartist implement by vuejs 2.0
https://github.com/lakb248/vue-chartist
Last synced: about 2 months ago
JSON representation
A component of Chartist implement by vuejs 2.0
- Host: GitHub
- URL: https://github.com/lakb248/vue-chartist
- Owner: lakb248
- License: mit
- Created: 2017-04-01T02:34:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-14T09:18:12.000Z (almost 8 years ago)
- Last Synced: 2025-10-21T08:13:10.663Z (about 2 months ago)
- Language: Vue
- Size: 28.3 KB
- Stars: 40
- Watchers: 1
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-chartist - A component of Chartist implement by vuejs 2.0 ` 📝 4 years ago` (UI Components [🔝](#readme))
- awesome-vue-zh - Vue,图表制作 - Chartist的Vue.js 2.0组件包装. (UI组件 / 图表)
- awesome-vue - vue-chartist - Vue.js 2.0 component wrap for Chartist. (Components & Libraries / UI Components)
- awesome-vue - vue-chartist ★31 - Vue.js 2.0 component wrap for Chartist. (UI Components / Charts)
- awesome-vue - vue-chartist - Vue.js 2.0 component wrap for Chartist. (UI Components / Charts)
README
# v-chartist
> A component of [Chartist](https://gionkunz.github.io/chartist-js) implements by vuejs 2.0
## Installation
```
npm install v-chartist --save
```
or
```
bower install vue-chartist --save
```
## Usage
``` javascript
import VueChartist from 'v-chartist';
new Vue({
components: {
'vue-chartist': VueChartist
},
template: '',
data: function () {
return {
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
},
options: {
fullWidth: true,
chartPadding: {
right: 40
}
}
};
}
});
```
## Props
| Property | Description |
|:--|:--|
| data | the data of chart |
| options | the options of chart |
| type | the type of chart, default `Line` |
| listener| the listener of chart |
See the document of [Chartist](https://gionkunz.github.io/chartist-js/api-documentation.html) for detail.
## Contribution
First, install dependencies
```
npm install
```
Second, setup development environment
```
npm run dev
```
## License
MIT