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 chart Read More

Charts for Analytics Data

Screenshot of an analytics line chart Read More

Charts for Healthcare Data

Screenshot of a healthcare scatter plot chart Read More

Charts for Sales Data

Screenshot of a sales chart dashboard Read More

Get started with just a few lines of code

1. Install via NPM

					$ npm install zingchart // Only if you have not already done so
$ npm install zingchart-vue

2. Register the component in your app

import Vue from 'vue';
						
// import the es6 version
import 'zingchart/es6';
// import the component AFTER ZingChart since it is a DIRECT dependency
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 {
		myConfig: {
				type: 'line',
				series: [{
					values: [43,23,54,54,39,47,38,59,39,49]
				}]
		}
    }
  }
}


View on GitHub