React Component for FusionCharts

Easy to use ReactJS component for FusionCharts

Add React charts and graphs like area, bar, donut, line, marimekko, radar, stockcharts and 150+ other charts & 1000+ maps for your web or mobile application. Using FusionCharts’ React 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’ React charts 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 React component is completely open source and actively maintained by a team of dedicated developers.

Features

  • Add a chart using just a 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 FusionCharts object that contains complete chart configurations.

Quick Demo

Simple chart
Quick demo

Quick Start

Step 1 : Install the FusionCharts React component

In the terminal run the following command:

$ $ npm install react-fusioncharts --save

Also install FusionCharts, if it is not already installed:

$ npm install fusioncharts --save

Step 2 : Import the FusionCharts component

After installing react-fusioncharts, import it in your React app:

import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

Step 3 : Render your Chart

For example, render a simple column chart

import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const myDataSource = {
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Venezuela",
            "value": "290"
        },
        {
            "label": "Saudi",
            "value": "260"
        },
        {
            "label": "Canada",
            "value": "180"
        },
        {
            "label": "Iran",
            "value": "140"
        },
        {
            "label": "Russia",
            "value": "115"
        },
        {
            "label": "UAE",
            "value": "100"
        },
        {
            "label": "US",
            "value": "30"
        },
        {
            "label": "China",
            "value": "30"
        }
    ]
};

const chartConfigs = {
      type: 'column2d',
      width: 600,
      height: 400,
      dataFormat: 'json',
      dataSource: myDataSource,
};

ReactDOM.render(
      <ReactFC {...chartConfigs} />,
      document.getElementById('root'),
);

Licensing

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