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

NameTypeDefaultDescriptiondataSource *Object[][]Binds the UI component to dataargumentField *StringundefinedSpecifies which data source field provides arguments for series pointsvalueField *StringundefinedSpecifies which data source field provides values for series pointswidthString100%Specifies the width of the UI componentheightString500pxSpecifies the height of the UI component in pixels.edgesshowValueLabelsBooleanfalseShows the value as label on data pointsshowArgumentTitlesBooleantrueShows the argument (x-axis) titlesshowValueTitlesBooleantrueShows the value (y-axis) titlesshowValueAxisLineBooleantrueShows the value axis (y-axis) lineshowArgumentAxisLineBooleantrueShows the argument axis (x-axis) lineshowHorizontalGridLinesBooleanfalseShows the horizontal gridshowVerticalGridLinesBooleanfalseShows the vertical grid lineshorizontalGridLineOptionsObject{stroke: '#dddddd80', 'stroke-width': '1px'}Specifies the horizontal grid lines styleverticalGridLineOptionsObject{stroke: '#dddddd80', 'stroke-width': '1px'Specifies the vertical grid linesfontSizeString12pxSpecify font size valuefontColorStringblackSpecify font colorfontFamilyStringArial, Helvetica, sans-serifSpecify font familyanimationBooleantrueEnables the animation in the UI componentanimationDurationString0.5sSpecifies how long the animation runsbreakpointsObjectBreakpointsSpecifies breakpoints for chart responsivenesscustomValueLabelFunction(value: number, index: number) => valueCustom value label function

Specific Props

• Bar Chart Props

NameTypeDefaultDescriptionbarColorStringblackSpecifies bar colorsbarColorsString[][]Specifies color for each specific barbarRadiusNumber0Specifies bar radius value

• Line Chart Props

NameTypeDefaultDescriptionlineColorStringblackSpecifies line colorlineWidthNumber3Specifies width value of the lineshowPointsBooleantrueShow 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