ChartJS 📈 ​
ChartJS is simple yet flexible JavaScript charting library for designers & developers. Please refer ChartJS Documentation for a full list of instructions and other options.
Installation ​
bash
# npm
npm install chart.js
npm install vue-chartjs
# yarn
yarn add chart.js
yarn add vue-chartjsUsage in Vue File ​
vue
<template>
<Bar
:options="chartConfig"
:height="400"
:data="data"
/>
</template>
<script>
import {Bar} from 'vue-chartjs'
import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: "ChartJsBarChart",
components: {
Bar
},
data() {
return {
date: '2022-06-09',
data: {
"labels": ["7/12", "8/12", "9/12", "10/12", "11/12", "12/12", "13/12", "14/12", "15/12", "16/12", "17/12", "18/12", "19/12"],
"datasets": [{
"maxBarThickness": 15,
"backgroundColor": "#ffcf5c",
"borderColor": "transparent",
"borderRadius": {"topRight": 15, "topLeft": 15},
"data": [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190]
}]
}
}
},
computed: {
chartConfig() {
return {
"responsive": true,
"maintainAspectRatio": false,
"animation": {"duration": 500},
"scales": {
"x": {
"grid": {
"borderColor": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.16)",
"drawBorder": false,
"color": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.16)"
}, "ticks": {"color": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.42)"}
},
"y": {
"min": 0,
"max": 400,
"grid": {
"borderColor": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.16)",
"drawBorder": false,
"color": "rgba(47,43,61,0.16)"
},
"ticks": {
"stepSize": 100,
"color": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.42)"
}
}
},
"plugins": {"legend": {"display": false}}
}
}
}
}
</script>