vue-chart.js
Chart.js for Vue
Install
$ npm i vue-chart.js
Chart Components
- BarChart
- LineChart
- RadarChart
- PieChart
- DoughnutChart
- PolarAreaChart
Common Chart Props
| Name |
Type |
Default |
Description |
| responsive |
Boolean |
true |
resizes when the canvas container does |
| title |
String |
null |
title text |
| title |
Object |
null |
title configuration |
| width |
Number |
null |
width of chart canvas |
| height |
Number |
null |
height of chart canvas |
| labels |
Array[string] |
[] |
labels of category axis |
Example
<template>
<bar-chart :width="600" :height="300" :responsive="false" :labels="labels" :datasets="datasets" :options="options"></bar-chart>
</template>
<script>
import {BarChart} from 'vue-chart.js';
export default {
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(220,220,220,0.2)",
hoverBorderColor: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40],
yAxisID: "y-axis-0",
}, {
label: "My Second dataset",
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(220,220,220,0.2)",
hoverBorderColor: "rgba(220,220,220,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
],
options: {}
},
components: {
BarChart
}
}
</script>