Contents
Description:
Do you want to create multiple types of SVG-based charts for your application? If yes then, you are at right place.
Vue3-Charts is a SVG based charting library for Vue.js 3, that is easy to integrate in your project and the developer can customize it as per his/her need.
How can I use it?
1. Install the library with npm or yarn. please note that, you need Vue version 3 or latest.
#npm
npm install vue3-charts –save
#yarn
yarn add vue3-charts
2. You will have import components from vue3-charts.
import { defineComponent, ref } from ‘vue’
import { Chart, Grid, Line } from ‘vue3-charts’
import { plByMonth } from ‘@/data’
3. Create bar chart elements.
export default defineComponent({
name: ‘LineChart’,
components: { Chart, Grid, Line },
setup() {
const data = ref(plByMonth)
const direction = ref(‘horizontal’)
const margin = ref({
left: 0,
top: 20,
right: 20,
bottom: 0
})
return { data, direction, margin }
}
})
4. Now, add following Vue.js code that will create bar chart.
export default defineComponent({
name: ‘LineChart’,
components: { Chart, Grid, Line },
setup() {
const data = ref(plByMonth)
const direction = ref(‘horizontal’)
const margin = ref({
left: 0,
top: 20,
right: 20,
bottom: 0
})
return { data, direction, margin }
}
})
4. Now import some data that will be displayed in bar chart.
export const plByMonth = [
{ name: ‘Jan’, pl: 1000, avg: 500, inc: 300 },
{ name: ‘Feb’, pl: 2000, avg: 900, inc: 400 },
{ name: ‘Apr’, pl: 400, avg: 400, inc: 500 },
{ name: ‘Mar’, pl: 3100, avg: 1300, inc: 700 },
{ name: ‘May’, pl: 200, avg: 100, inc: 200 },
{ name: ‘Jun’, pl: 600, avg: 400, inc: 300 },
{ name: ‘Jul’, pl: 500, avg: 90, inc: 100 }
]
The post Vue3-Charts: Highly Customizable SVG-based Chart Library For Vue.js 3 appeared first on Lipku.com.
Permanent link to this post here
