Vue Component for FusionCharts

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

Make interactive charts in Vue using this easy-to-use, lightweight Vue.js component for the FusionCharts JavaScript Charting Library.

Features

  • Add a chart using just one single component.
  • Keep all your chart elements in sync with native support for Data Binding.
  • Insert charts from a JSON URL, a XML URL, or using Props Array Binding.
  • Enable interactivity between Javascript charts.
  • Enjoy advanced control with full access to the FusionCharts object containing the complete chart configuration.

Quick Demo

Simple chart
Quick demo

Quick Start

Step 1 : Install the FusionCharts Vue.js component

In the terminal run the following command:

$ npm install vue-fusioncharts --save

Also install FusionCharts, if it is not already installed:

$ npm install fusioncharts --save

Step 2 : Register the FusionCharts component

Use the Vue.use method to register the component globally:

In case of vue-cli or vue with bundlers, traditionally main.js contains the initialization code below

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';

// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts);

Or, Use the Vue.component method to register the component locally:

import Vue from 'vue';
import FusionCharts from 'fusioncharts';
import { FCComponent } from 'vue-fusioncharts';

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

Step 3 : Render your chart

For example, render a simple pie chart

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

// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, Charts)

const myDataSource = {
    "chart": {
        "caption": "Recommended Portfolio Split",
        "subCaption" : "For a net-worth of $1M",
        "showValues":"1",
        "showPercentInTooltip" : "0",
        "numberPrefix" : "$",
        "enableMultiSlicing":"1",
        "theme": "fusion"
    },
    "data": [{
        "label": "Equity",
        "value": "300000"
    }, {
        "label": "Debt",
        "value": "230000"
    }, {
        "label": "Bullion",
        "value": "180000"
    }, {
        "label": "Real-estate",
        "value": "270000"
    }, {
        "label": "Insurance",
        "value": "20000"
    }]
};

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">
    <fusioncharts
        :type="type"
        :width="width"
        :height="height"
        :dataFormat="dataFormat"
        :dataSource="dataSource">
    </fusioncharts>
</div>

Licensing

FusionCharts Vue.js component is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can download a free evaluation version. However, You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).