Customizable & Composable Charts for VueJS

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or customize your layouts by passing props or using custom slots or components.

Features & characteristics:

Linear Charts
Bar Charts
Stack Charts
Pie Charts
Animation components
Additional components

Must Read: Open Source CSS Chart & Graph Framework For Data Visualization | Charts.css

–

How to make use of it:

Installation:

yarn add vue-wcharts
or
npm install vue-wcharts

1. The UMD version is also available at unpkg.com (unpkg):

<script src="//unpkg.com/vue-wcharts"></script>

2. Add your vue.config.js file.

transpileDependencies: [
    /\/node_modules\/vue-wcharts\//,
],

3. Add your jest.config.js.

transformIgnorePatterns: [
    '/node_modules/(?!vue-wcharts|d3-array|d3-scale|d3-shape)',
],

4. Import the library as a plugin for Vue to enable the functionality globally on all components.

import Vue from 'vue'
import WCharts from 'vue-wcharts'

Vue.use(WCharts)

5. Alternatively, you can upload only components that you will use.

import Vue from 'vue'
import { WCartesian, WLine } from 'vue-wcharts'

Vue.component('WCartesian', WCartesian)
Vue.component('WLine', WLine)

6. If you build a tool that supports it, upload it on demand, and register the components you need.

<template>
    <WCartesian :dataset="values">
        <WLine datakey="one" />
    </WCartesian>
</template>

<script>
import { WCartesian, WLine } from 'vue-wcharts'

export default {
  components: {
    WCartesian,
    WLine,
  },
  data() {
    return {
        values: [
            { name: 'Page A', one: 1000 },
            { name: 'Page B', one: 3000 },
            { name: 'Page C', one: 2000 },
        ]
    }
  )
}
</script>