Creating interactive charts in Vue just got easier

Bring the data in your Vue apps to life with ZingChart's powerful JavaScript API & built-in features using the official Vue component for ZingChart.

Laptop illustration with the Vue.js logo on its screen

Curious to see how it works?

We've created a 3-part tutorial series to show you how to build an interactive dashboard using the ZingChart Vue component.

Play with the live demo to see the Vue component for ZingChart in action!

Integrate ZingChart in your next Vue project

Whether you’d like to use the free branded version of ZingChart, or are looking to integrate ZingChart into your next OEM commercial project – take a look at our licensing options to see what’s right for you.

View Licensing Options
ZingChart logo

Ready to create mobile-friendly charts with ZingChart's 35+ built-in chart types and 25+ features?

Charts are a necessity in most apps, regardless of the industry you're developing for, so you'll usually need at least one chart to visualize industry-specific data.

ZingChart gives developers like you an all-in-one solution that's robust enough to handle most charting challenges, including those involving big data. Check out the following blog posts to learn about the different web development use cases that ZingChart is suited for across different industries.

Mobile phone illustration with two radar charts on its screen

Charts for Financial Data

Screenshot of a financial area chartRead More

Charts for Analytics Data

Screenshot of an analytics line chartRead More

Charts for Healthcare Data

Screenshot of a healthcare scatter plot chartRead More

Charts for Sales Data

Screenshot of a sales chart dashboardRead More

Get started with just a few lines of code

1. Install via NPM

$ npm install zingchart-vue

2. Register the component in your App

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

Vue.component('zingchart', zingchartVue);

3. Add the component to your markup

<zingchart :data="myConfig" :height="300" :width="600"/>

4. Define your chart configuration in your app

export default {
  data() {
    return {
      type: 'line',
      series: [{
        values: [43,23,54,54,39,47,38,59,39,49]
      }]
    }
  }
}


View on Github