vue-chartify v1.0.3

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

Specific Props

• Bar Chart Props

• Line Chart Props

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>