https://github.com/kevinongko/vue-chart-js
Chart.js wrapper component based on Vue.js
https://github.com/kevinongko/vue-chart-js
chart chartjs vue wrapper
Last synced: 4 months ago
JSON representation
Chart.js wrapper component based on Vue.js
- Host: GitHub
- URL: https://github.com/kevinongko/vue-chart-js
- Owner: kevinongko
- License: mit
- Created: 2017-02-13T04:37:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-12T02:53:12.000Z (over 7 years ago)
- Last Synced: 2025-03-01T03:13:17.711Z (4 months ago)
- Topics: chart, chartjs, vue, wrapper
- Language: JavaScript
- Homepage:
- Size: 169 KB
- Stars: 34
- Watchers: 3
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-chart-js
[](https://www.npmjs.com/package/vue-chart-js)
[](https://www.npmjs.com/package/vue-chart-js)
[](https://www.npmjs.com/package/vue-chart-js)
[](http://opensource.org/licenses/MIT)
[Chart.js](http://www.chartjs.org/) wrapper component based on [Vue](https://vuejs.org/).
**Works with Vue 2.***
## Installation
### Install via CDN
```html
Vue.use(VueChart.default)
```
### Install via NPM
```sh
$ npm install vue-chart-js --save
```
#### Register as Component
```js
import Vue from 'vue'
import VueChart from 'vue-chart-js'
export default {
name: 'App',
components: {
VueChart
}
}
```
#### Register as Plugin
```js
import Vue from 'vue'
import VueChart from 'vue-chart-js'
Vue.use(VueChart)
```
## Usage
```vue
import VueChart from 'vue-chart-js'
export default {
name: 'App',
components: {
VueChart
},
data: () => ({
chartData: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [
{
label: 'Component 1',
data: [10, 20, 30]
},
{
label: 'Component 2',
data: [20, 30, 40]
}
]
}
}),
}
```
## Props
|Props|Description|Type|Required|
|-----|-----------|----|--------|
|type|Chart.js type|String|true|
|data|Chart.js datasets|Object|true|
|options|Chart.js options|Object|false|
|width|Chart width|Number|false|
|height|Chart height|Number|false|
## License
Vue-Chart-Js is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)
## Support
Hello, I'm Kevin the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me. Thanks :smiley:
- [One-time donation via Paypal](https://www.paypal.me/kevinongko)