Skip to content
A Vue component to create charts with ZingChart
JavaScript Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
public Creates more extensive demos Sep 24, 2019
.editorconfig Adds eslint and formats readme Sep 20, 2019
.eslintrc.js
.gitignore
LICENSE Create LICENSE Nov 15, 2019
README.md Patches height/width issue to set both the css and attributes on zing… Oct 1, 2019
ZingChart.vue 0.0.4 Oct 1, 2019
constants.js Updates method names Oct 10, 2019
package-lock.json
package.json v1.0.1 Oct 10, 2019

README.md

zingchart-vue

Quickly add charts to your Vue application with our ZingChart component

This guide assumes some basic working knowledge of Vue.

1. Install

Install the zingchart-vue package via npm

$ npm install zingchart-vue

2. Include the component in your project

You can either include the zingchart-vue component to your project globally or locally per component

Globally

In your main app file, add the following lines of code:

import Vue from 'vue';
import zingchartVue from 'zingchart-vue';

Vue.component('zingchart', zingchartVue)

This will register the zingchart component globally throughout your application. While the easiest installation option, this will load ZingChart immediately on your user's first load of the application - regardless if a chart is on the first page or not. We reccomend this approach if ZingChart is used heavily across multiple pages.

Locally per component

In each component where ZingChart is being used, include the following in your component's configuration:

import zingchartVue from 'zingchart-vue';

{
    ...
    components: {
        zingchart: zingchartVue,
        ...
    }
}

We reccomend this approach if ZingChart is only included in a few, un-related pages across your application.

Usage

The zingchart-vue component can be included into template as an element. Below is a simple example of a line chart:

<zingchart :data="chartData"></zingchart>
...
new Vue({
    ...
    data() {
        return {
            chartData: {
                type: 'line',
                series: [{
                    values: [4,5,3,3,4,4]
                }]
            }
        }
    }
    ...
})

Parameters

data [object]

<zingchart :data="myData" :series="mySeries"></zingchart>
{
    data() {
        return {
            myData: {
                type: 'line',
                title: {
                    text: 'Hello World',
                },
            },
            mySeries: [
                { values: [1,2,4,5,6] }
            ]
        }
    }
}

id [string] (optional)

The id for the DOM element for ZingChart to attach to. If no id is specified, the id will be autogenerated in the form of zingchart-auto-#

series [array] (optional)

Accepts an array of series objects, and overrides a series if it was supplied into the config object. Varries by chart type used - Refer to the ZingChart documentation for more details.

<zingchart :data="myData" :series="mySeries"></zingchart>
{
    data() {
        return {
            myData: {
                type: 'line',
                title: {
                    text: 'Hello World',
                },
            },
            mySeries: [
                { values: [1,2,4,5,6] }
            ]
        }
    }
}

width [string or number] (optional)

The width of the chart. Defaults to 100%

height [string or number] (optional)

The height of the chart. Defaults to 480px.

theme [object] (optional)

The theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes

Events

All zingchart events are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:

    <zingchart :data="myData" @complete="chartCompleted"/>
{
    ...
    events: {
        chartCompleted(result) {
            console.log(`The chart ${result.id} finished rendering`);
        }
    }
}

For a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/events

Methods

All zingchart methods are readily available on the component's instance to call. For example, to add a new plot node to the chart:

    <zingchart :data="myData" ref="chart"/>
{
    ...
    methods: {
        myCustomAddNode() {
            this.$refs.chart.addnode({
                value: 55,
            });
        }
    }
}

For a list of all the methods that you can call and the parameters each method can take, refer to the complete documentation on https://www.zingchart.com/docs/methods

Hello World and Examples

This repository contains a sample Vue application to give you an easy way to see the component in action

$ npm run dev 
You can’t perform that action at this time.