Vue FusionCharts Component

The vue-fusioncharts component provides a straightforward and efficient way to integrate the powerful FusionCharts JavaScript Charting Library with your Vue.js (Vue 3) applications.

Quick Links

• Demo
• Documentation
• FusionCharts NPM Package
• Support
• Official Website

Table of Contents

1. Getting Started
   • Requirements
   • Installation
   • Usage
2. Quick Start
3. Working with Events
4. Working with APIs
5. Advanced Usage and FusionTime
6. Contributing
7. Licensing

Getting Started

Requirements

Ensure you have Node.js, NPM/Yarn installed globally. Additionally, you need FusionCharts and Vue installed in your project.

Installation

You can install vue-fusioncharts directly via NPM or Yarn, or by downloading the binaries from our GitHub repository.

NPM

npm install vue-fusioncharts --save

Yarn

yarn add vue-fusioncharts

Direct Download

Download the vue-fusioncharts.js file and include it in your project using a <script> tag:

<script src="path/to/vue-fusioncharts.js"></script>

Usage

vue-fusioncharts can be integrated into your Vue application either globally as a plugin or locally within a component.

Global Registration

import { createApp } from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

const app = createApp(App);
app.use(VueFusionCharts, FusionCharts, Charts);

Local Registration

import { createApp } from 'vue';
import VueFusionChartsComponent from 'vue-fusioncharts/component';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

const app = createApp(App);
const VueFusionCharts = VueFusionChartsComponent(FusionCharts, Charts);
app.component('fusioncharts', VueFusionCharts);

Quick Start

Here is an example to quickly set up a chart using vue-fusioncharts:

import { createApp } from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/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' },
    // more data
  ]
};

const App = {
  data() {
    return {
      type: 'column2d',
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: myDataSource
    };
  }
};

const app = createApp(App);
app.use(VueFusionCharts, FusionCharts, Charts);
app.mount('#app');

<div id="app">
  <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource">
  </fusioncharts>
</div>

Working with Events

To handle events within vue-fusioncharts, use Vue event handling syntax:

<fusioncharts
  :type="type"
  :width="width"
  :height="height"
  :dataFormat="dataFormat"
  :dataSource="dataSource"
  @dataPlotRollover="onDataPlotRollover"
  ref="fc">
</fusioncharts>

Advanced Usage and FusionTime

From fusioncharts@3.13.3-sr.1 and vue-fusioncharts@3.0.0, FusionTime allows easy visualization of time series data.

import { createApp } from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';

const app = createApp(App);
app.use(VueFusionCharts, FusionCharts, TimeSeries);
app.mount('#app');

Contributing

Contributions are welcome! Please refer to the repository's issue tracker to report bugs or submit feature requests.

Licensing

vue-fusioncharts is open-source under the MIT/X11 License. Note that FusionCharts itself is separately licensed, and you need to purchase a commercial license for production use.