Awesome
vue-chart
A Powerful and Highspeed Chart Parser for Vue.
- version 1.X.X for vue1.X.X
- version 2.X.X for vue2.X.X
Example
Installation
Browser globals
The dist folder contains
vue-chart.js
andvue-chart.min.js
with the component exported in thewindow.VueChart
object.
<body>
<vue-chart type="line" :data="myData" :options="myOptions"></vue-chart>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-chart.js"></script>
<script>
var vm = new Vue({
el: "body",
components: {
VueChart
}
});
</script>
CommonJS
var VueChart = require('vue-chart');
new Vue({
components: {
'vue-chart': VueChart
}
})
js
// <script src="dist/vue-chart.js"></script>
new Vue({
components: {
VueChart
}
})
ES6
import VueChart from 'vue-chart'
new Vue({
components: {
VueChart
}
})
Props
Prop | Type | Default |
---|---|---|
type | String | type="line" |
data | Object | DOCS |
options | Object | DOCS |
Todo
Done | Prop | Type | Required | Description |
---|---|---|---|---|
No | type | String | no | default is line |
No | datasets | Array[object] | yes | Chart.data.datasets |
No | labels | Array[String] | yes | Chart.data.labels |
No | xLabels | Array[String] | no | Chart.data.xLabels |
No | yLabels | Array[String] | no | Chart.data.yLabels |
No | common | Object | no | Common Chart Configuration |
No | title | Object | no | Title Configuration |
No | legend | Object | no | Legend Configuration |
No | tooltip | Object | no | Tooltip Configuration |
No | hover | Object | no | Hover Configuration |
No | animation | Object | no | Animation Configuration |
No | element | Object | no | Element Configuration |