WCharts | Waavi

Getting Started

Installation

Npm

Install using yarn or npm.

yarn add vue-wcharts

or

npm install vue-wcharts

UMD

The UMD build is also available on unpkg.com (unpkg):

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

Basic Configuration

Add in your vue.config.js

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

Jest Configuration

Add in your jest.config.js

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

Register

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

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

Vue.use(WCharts)

Alternatively, you may load only the components you will use.

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

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

If you build tool supports it, load on demand, registering 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>


Basic case

Choose your Chart

Instance a simple cartesian chart and pass data by a prop (usually an array of objects).

<template>
    <WCartesian :dataset="values" />
</template>

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

Add your first component

Add a line chart for a specfic key on the dataset, in this case 'one'.

<template>
    <WCartesian :width="600" :height="300" :dataset="values">
        <WLine datakey="one" />
    </WCartesian>
</template>

<script>
export default {
  data() {
    return {
        values: [
            { name: 'Page A', one: 1000, two: 2400, },
            { name: 'Page B', one: 3000, two: 1398, },
            { name: 'Page C', one: 2000, two: 9800, },
        ]
    }
  )
}
</script>

Add more components and plugins

Add an axis, tooltip and another line chart with the 'two' dataKey.

<template>
    <WCartesian responsive :dataset="values">
        <WLine datakey="one" dot />
        <WLine datakey="two" curve />
        <WXAxis datakey="name" />
        <WYAxis />
        <WTooltip />
    </WCartesian>
</template>

<script>
export default {
  data() {
    return {
        values: [
            { name: 'Page A', one: 1000, two: 2400, },
            { name: 'Page B', one: 3000, two: 1398, },
            { name: 'Page C', one: 2000, two: 9800, },
        ]
    }
  )
}
</script>


Custom case

Customize your components and plugins

For example update styles, use slots and more interactions components

<template>
    <WCartesian responsive :dataset="values">
        <WCartesianGrid />

        <WLine
            datakey="one"
            legend="One Line"
            dot
        >
            <template #dot="{ dot }">
                <text
                    :x="dot.x"
                    :y="dot.y"
                    text-anchor="center"
                >
                    {{ dot.value|percentage }} %
                </text>
            </template>
        </WLine>
        <WLine
            datakey="two"
            legend="Two Line"
            curve
        />

        <WXAxis
            datakey="name"
            :axisStyles="axisStyles"
            :tickStyles="tickStyles"
            :markStyles="markStyles" />
        <WYAxis />

        <WTooltip />
        <WLegend
            selectable />
    </WCartesian>
</template>

<script>
const markStyles = {
    stroke: 'transparent',
}
const axisStyles = {
    stroke: '#485465',
}
const tickStyles = {
    fontSize: '12px',
    fontWeight: 300,
    color: '#485465',
}

export default {
  data() {
    return {
        values: [
            { name: 'Page A', one: 1000, two: 2400, },
            { name: 'Page B', one: 3000, two: 1398, },
            { name: 'Page C', one: 2000, two: 9800, },
        ],
        axisStyles,
        tickStyles,
        markStyles,
    }
  )
}
</script>

Theme

If you want to set a theme via options, you can add a second parameter with your theme configuration when you install the library (Full explanation):

Vue.use(WCharts, {
    // Colors Palette
    colors: [
        '#48c0b6',
        '#5400e8',
        '#a712b5',
        '#dfbd46',
    ],
    // Theme styles
    theme: {
        WLine: {
            styles: {
                strokeWidth: 4,
                strokeDasharray: 1,
            },
            dot: {
                fill: 'black',
                strokeWidth: 4,
            },
        },
        WCartesianGrid: {
            styles: {
                stroke: '#48c0b6',
                strokeWidth: 2,
                strokeDasharray: 4,
            },
        },
        ...
    }
})


Dev

If you wish to fork, extend or develop for WCharts, you may setup the dev environment like so.

$ git clone https://github.com/Waavi/vue-wcharts.git
$ cd vue-wcharts && yarn
$ yarn serve

# Run tests
$ yarn test

# Lints and fixes files
$ yarn run lint

# Build
$ yarn build


Browser compatibility

Doesn't support IE11.



← Feedback →