Vue Component for FusionCharts

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

Add Vue.Js charts and graphs like area, bar, donut, line, marimekko, radar, stockcharts and 150+ other charts & 1000+ maps for your web application based on Vue. Using FusionCharts’ Vue component you can create charts which are responsive, interactive, and, support zooming, panning, APIs, animation, drill-downs, real-time updates, and even full exporting of charts & dashboards.

It also comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. All charts and dashboards made on FusionCharts’ Vue component are mobile first by default, and responsive across all devices. Further, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the Vue component is completely open source and actively maintained by a team of dedicated developers.

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).