An easy-to-use, lightweight VueJS component for the FusionCharts JavaScript Charting Library

The Vue-FusionCharts component lets you easily include FusionCharts in your VueJS projects and add interactive charts to your VueJS applications.

Download Plugin View it on Github


  • Adds a chart using just one single component.
  • Auto-updates the chart object when the data source is modified.
  • Adds a chart from a JSON URL, from a XML URL, or using Props Array Binding.
  • Allows you to enable interactivity between Javascript charts.
  • Offers advanced control by giving you access to the complete FusionCharts object (containing the chart configuration).


Simply open up a github issue with your question/bug report/suggestion.

Along with vue helper, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files


Step 1: Install the Vue-FusionCharts wrapper framework

In the terminal run the following command:

    $ npm install vue-fusioncharts --save

Step 2: Register the VueFusionCharts component

Use the Vue.use method to register the component globally

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

// resolve charts dependency

// register VueFusionCharts component

Use the Vue.component method to register the component locally

import Vue from 'vue';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import { FCComponent } from 'vue-fusioncharts';

// resolve charts dependency

// register Vue-FusionCharts component
Vue.component('fusioncharts', FCComponent);

Step 3: Render your Chart

For example render a simple pie chart


const myDataSource = {
    "chart": {
        "caption": "Age profile of website visitors",
        "subcaption": "Last Year",
        "theme": "ocean"
    "data": [
            "label": "Teenage",
            "value": "1250400"
            "label": "Adult",
            "value": "1463300"
            "label": "Mid-age",
            "value": "1050700"
            "label": "Senior",
            "value": "491000"

const chart = new Vue({
    el: '#app',
    data: {
        type: 'pie2d',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: myDataSource
Here's the HTML template for the above example

<div id="app">
    <div fusioncharts
       dataSource="" >

And your chart should display when you load the page.


Vue-FusionCharts is an open-source resouorce, distributed under the terms of the MIT/X11 License. You will still need to include FusionCharts in your page, as this project provides no direct functionality. You can download a free evaluation version here.

FusionCharts is free for non-commercial and personal use. To use in a commercial environment, please purchase a FusionCharts license.