ZingChart Vue Component

Due to popular demand from our customers, we have created our very own zingchart-vue component! This component allows you to quickly add charts to your Vue application.

The package is available on GitHub https://github.com/zingchart/zingchart-vue or via npm using $ npm install zingchart-vue

To use, simply install include the component to your Vue app!

import Vue from 'vue';
import zingchartVue from 'zingchart-vue';
Vue.component('zingchart', zingchartVue)

The component takes four high level attributes:

data (required) - the same data object used to configure a chart
series (optional) - the series array. This overrides any series object you include in the data.
width (optional) - the width of the chart. Defaults to 100%
height (optional) - the height of the chart. Defaults to 480px.

Each of these properties are watched and will re-render the chart if changed. This allows for dynamic data changes to occur as expected in Vue!

<zingchart :data="myData" :series="mySeries"></zingchart>

{
    data() {
        return {
            myData: {
                type: 'line',
                title: {
                    text: 'Hello World',
                },
            },
            mySeries: [
                { values: [1,2,4,5,6] }
            ]
        }
    }
}

All of ZingChart's events and methods are also available directly on the component.

    <zingchart :data="myData" ref="chart" @complete="chartCompleted"/>

{
    ...
    methods: {
        myCustomAddNode() {
            this.$refs.chart.addnode({
                value: 55,
            });
        },

    },
    events: {
        chartCompleted(result) {
            console.log(`The chart finished rendering`);
        }
    }
    
    ...
}

For more information about the component, visit our GitHub page for the full documentation! https://github.com/zingchart/Zingchart-Vue

We've also built a bare bones hello world on Glitch to get you started: https://glitch.com/~vue-chart