Vue3-Charts: Highly Customizable SVG-based Chart Library For Vue.js 3


Category: Vue.js Vue.js Charts | July 9, 2021
Author:ghalex
Official Page:Go to website
Last Update:July 9, 2021
License:MIT

vuejs svg bar chart

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 }
]