vue-chart-js
v1.4.1
Published
Chart.js for VueJs.
Downloads
1,201
Maintainers
Readme
vue-chart-js
Chart.js wrapper component based on Vue.
Works with Vue 2.*
Installation
Install via CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-chart-js"></script>
<script>
Vue.use(VueChart.default)
</script>
Install via NPM
$ npm install vue-chart-js --save
Register as Component
import Vue from 'vue'
import VueChart from 'vue-chart-js'
export default {
name: 'App',
components: {
VueChart
}
}
Register as Plugin
import Vue from 'vue'
import VueChart from 'vue-chart-js'
Vue.use(VueChart)
Usage
<template>
<vue-chart type="bar" :data="chartData"></vue-chart>
</template>
<script>
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]
}
]
}
}),
}
</script>
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