Close More (Vert) Close

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 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() {
                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!

We've also built a bare bones hello world on Glitch to get you started:

comments powered by Disqus