Press "Enter" to skip to content

Customizable & Composable Charts for VueJS | vue-wcharts

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.

vue charts examples, vue chartkick, vue chart 3, nuxt charts, free vue chart library, vue js chart plugin

Features & characteristics:

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

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>

vue-charts-examples

customizable & composable charts, vue-wcharts Plugin/Github


See Demo And Download

Official Website(Waavi): Click Here

This superior jQuery/javascript plugin is developed by Waavi. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.