Vue Chartify

Vue Chartify is a lightweight and easy-to-use library for creating beautiful and interactive charts with Vue.js. Supports the common chart types, such as line and bar chart and more will be added soon.

Features

Responsive and adaptive to different screen sizes
Lightweight, efficient, on-demand binding events
Customizable colors, fonts, lines, and animation
Supports Vue 3 and TypeScript

Installation

Use npm:

  npm install vue-chartify

Add the css in main.ts

import { createApp } from 'vue'
import App from './App.vue'
import "vue-chartify/style.css"

createApp(App).mount('#app')

Import the component

<script lang="ts">
  import { defineComponent } from 'vue'
  import { VcBarChart, VcLineChart } from 'vue-chartify';
  export default defineComponent({
      components: { VcBarChart, VcLineChart },
      // rest of your component
  })
</script>

Use the component in template

Bar Chart

<vc-bar-chart 
    data-source="<YourDataSource>"
    argument-field="<YourArgumentField>"
    value-field="<YourValueField>"
    :show-value-axis-line="true"
    :show-argument-axis-line="true"
    :show-value-titles="true"
    :show-argument-titles="true"
    :show-value-labels="true"
    :show-horizontal-grid-lines="true"
    :show-vertical-grid-lines="true"
    :bar-colors="['#454d66', '#309975', '#58b368', '#dad873', '#efeeb4', '#454d66', '#309975']"
    bar-color="red"
    :bar-radius="5"
    :animation="true"
/>

Line Chart

<vc-line-chart 
    data-source="<YourDataSource>"
    argument-field="<YourArgumentField>"
    value-field="<YourValueField>"
    :show-value-axis-line="true"
    :show-argument-axis-line="true"
    :show-value-titles="true"
    :show-argument-titles="true"
    :show-value-labels="true"
    :show-horizontal-grid-lines="true"
    :show-vertical-grid-lines="true"
    line-color="#343090"
    :line-width="3"
    :animation="true"
    :show-points="true"
/>

Common Props

* = required

Name	Type	Default	Description
dataSource *	Object[]	[]	Binds the UI component to data
argumentField *	String	undefined	Specifies which data source field provides arguments for series points
valueField *	String	undefined	Specifies which data source field provides values for series points
width	String	`100%`	Specifies the width of the UI component
height	String	`500px`	Specifies the height of the UI component in pixels.edges
showValueLabels	Boolean	`false`	Shows the value as label on data points
showArgumentTitles	Boolean	`true`	Shows the argument (x-axis) titles
showValueTitles	Boolean	`true`	Shows the value (y-axis) titles
showValueAxisLine	Boolean	`true`	Shows the value axis (y-axis) line
showArgumentAxisLine	Boolean	`true`	Shows the argument axis (x-axis) line
showHorizontalGridLines	Boolean	`false`	Shows the horizontal grid
showVerticalGridLines	Boolean	`false`	Shows the vertical grid lines
horizontalGridLineOptions	Object	`{stroke: '#dddddd80', 'stroke-width': '1px'}`	Specifies the horizontal grid lines style
verticalGridLineOptions	Object	`{stroke: '#dddddd80', 'stroke-width': '1px'`	Specifies the vertical grid lines
fontSize	String	`12px`	Specify font size value
fontColor	String	`black`	Specify font color
fontFamily	String	`Arial, Helvetica, sans-serif`	Specify font family
animation	Boolean	`true`	Enables the animation in the UI component
animationDuration	String	`0.5s`	Specifies how long the animation runs
breakpoints	Object	Breakpoints	Specifies breakpoints for chart responsiveness
customValueLabel	Function	`(value: number, index: number) => value`	Custom value label function

Specific Props

Bar Chart Props

Name	Type	Default	Description
barColor	String	`black`	Specifies bar colors
barColors	String[]	`[]`	Specifies color for each specific bar
barRadius	Number	`0`	Specifies bar radius value

Line Chart Props

Name	Type	Default	Description
lineColor	String	`black`	Specifies line color
lineWidth	Number	`3`	Specifies width value of the line
showPoints	Boolean	`true`	Show the points

Breakpoints

The default object of Breakpoints has the following properties. The gap value determines the spacing and affects their sizes.

{
    xs: {
        width: '576px',
        gap: '20px'
    },
    sm: {
        width: '768px',
        gap: '22px'
    },
    md: {
        width: '992px',
        gap: '25px'
    },
    lg: {
        width: '1200px',
        gap: '27px'
    },
    xl: {
        width: '1400px',
        gap: '30px'
    }
}

Example

<template>
  <div>
    <div class="bar-charts">
      <vc-bar-chart
        :data-source="dataSource"
        argument-field="continent"
        value-field="density"
        :bar-colors="['#454d66', '#309975', '#58b368', '#dad873', '#efeeb4', '#454d66', '#309975']"
        :bar-radius="5"
        :animation="true"
        :custom-value-label="getValueLabel"
        show-value-labels
        @bar:click="onBarClick"
      />
      <vc-bar-chart
        :data-source="dataSource"
        argument-field="continent"
        value-field="population"
        :bar-colors="['#e0f0ea', '#95adbe', '#574f7d', '#503a65', '#3c2a4d', '#e0f0ea', '#95adbe']"
        :bar-radius="5"
        :animation="true"
        show-value-labels
        :custom-value-label="getValueLabel"
        @bar:click="onBarClick"
      />
    </div>
    <vc-line-chart
      :data-source="dataSource"
      argument-field="continent"
      value-field="area"
      line-color="#574f7d"
      :animation="true"
      :custom-value-label="getValueLabel"
      @point:click="onBarClick"
    />
  </div>
</template>

<script>
import { VcBarChart, VcLineChart } from 'vue-chartify'
export default {
  components: { VcBarChart, VcLineChart },
  data() {
    return {
      dataSource: [
        {
          continent: 'Europe',
          population: 740433713,
          area: 22134710,
          density: 33
        },
        {
          continent: 'Africa',
          population: 1460481772,
          area: 29648481,
          density: 49
        },
        {
          continent: 'South America',
          population: 439719009,
          area: 17461112,
          density: 25
        },
        {
          continent: 'North America',
          population: 604182517,
          area: 21330000,
          density: 28
        },
        {
          continent: 'Asia',
          population: 4753079726,
          area: 31033131,
          density: 153
        },
        {
          continent: 'Australia',
          population: 46004866,
          area: 8486460,
          density: 5
        },
        {
          continent: 'Antartica',
          population: 0,
          area: 13720000,
          density: 0
        }
      ]
    }
  },
  methods: {
    onBarClick(data) {
      console.log(data)
    },
    onPointClick(data) {
      console.log(data)
    },
    getValueLabel(value) {
      if (value > 0 && value < 1) {
        const precision = Math.ceil(-Math.log10(value))
        return value.toFixed(precision)
      }
      return value.toLocaleString()
    }
  }
}
</script>

<style lang="scss" scoped>
.bar-charts {
  display: flex;
  flex-direction: row;
}
</style>

GitHub

View Github