ReactJS Component

Easy to use ReactJS component for FusionCharts.

React is a JavaScript library for creating reusable UI components. It was developed by Facebook and Instagram, and is rapidly rising in popularity among developers. If you are using React for your project, you are in luck as we have a simple component for it. You can select from 90+ charts/gauges and 1000+ maps to build the visualization of your choice - using a single component. You will have complete access to rich features of FusionCharts like events, annotations, macros, themes, image-export etc. to make your dataviz more awesome. Dive into the examples and quick start guide below to make your first chart today!

Download Plugin View it on Github


Features

  • Adds a chart using just a 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 to include interactivity between javascript charts.
  • Offers advanced control by giving you access to the complete FusionCharts object (that contains the chart configuration).

Support

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

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

QuickStart

Step 1: Install fusioncharts, react, react-dom, and react-fusioncharts npm package

Execute the commands below in the terminal to install fusioncharts, react, react-dom and react-fusioncharts node modules.

npm install react --save
npm install react-dom --save
npm install fusioncharts --save
npm install react-fusioncharts --save


// or single line
npm install react react-dom fusioncharts react-fusioncharts --save

Step 2: Add the HTML container element for rendering the chart

In your HTML, find the section where you wish to render the chart place a <div> for the FusionCharts to be rendered.

<div id='chart-container'></div>

Step 3: Import react-fusioncharts package from npm

Import react, react-dom, fusioncharts, and react-fusioncharts modules, in this order, through npm. In your JavaScript code, define an object that consists of all the configurations and their values, required to render FusionCharts.

import React from 'react';
import ReactDOM from 'react-dom';
import fusioncharts from 'fusioncharts';
// Load the charts module
import charts from 'fusioncharts/fusioncharts.charts';
import react-fusioncharts from 'react-fusioncharts';

// Pass fusioncharts as a dependency of charts
charts(FusionCharts)

var chartConfigs = {
    type: "Column2D",
    className: "fc-column2d", // ReactJS attribute-name for DOM classes
    dataFormat: "JSON",
    dataSource: {
        chart:{},
        data: [{value: 500}, {value: 600}, {value: 700}]
    }
};

Step 4: Pass the configurations required for FusionCharts and render the chart

FusionCharts component for react can be used in two ways.

  1. Use the ReactFC component directly in ReactDOM to render the chart. The configurations are passed as props of the component.
  2. Create multiple ReactFC component inside your custom defined component to render individual charts. This way you would be able to hold the state in your custom defined component and will be able to perform various activities using the component’s lifecycle hooks.

Method 1: Render the chart in the React application for a standalone chart, we can choose to make a component class or directly render the chart with the ReactFC component class. The object containing the chart configuration properties are passed to the FusionCharts component as props, as shown below


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

Method 2: Create a custom MyApp component to render the chart as shown below:

var MyApp = React.createClass({
    ..., // Rest of the React Component Code
    render: function () {
        return (
            <ReactFC {...categoryChartConfigs} />
            <ReactFC {...revenueChartConfigs} />
        );
    }
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);

While it is recommended to create an object, with the configuration properties, and passing the values defined, you can also pass the configuration properties separately as shown below:

var chartData = {
        chart: {},
        data: [{value: 500}, {value: 600}, {value: 700}]
    };

ReactDOM.render(
    <ReactFC
        type = "Column2D"
        className = "fc-column2d"  // ReactJS attribute-name for DOM classes
        dataFormat = "JSON"
        dataSource = {chartData}/>,
    document.getElementById('chart-container')
);

Your chart should now render when the page is loaded.

Step 1: Include react-fusioncharts.js

In your HTML, include react-fusioncharts.js after all other scripts:


<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/JSXTransformer.js"></script> 
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-fusioncharts/dist/react-fusioncharts.js"></script>

Step 2: Add the HTML element where FusionCharts is to be rendered

In your HTML, find the section where you wish to add the chart place a <div> for the FusionCharts to be rendered.

<div id='chart-container'></div>

Step 3: Populate required configurations

In your JavaScript code, define an object which consists of all the configurations and their values, required to get FusionCharts up.

var chartConfigs = {
    type: "Column2D",
    className: "fc-column2d", // ReactJS attribute-name for DOM classes
    dataFormat: "JSON",
    dataSource: {
        chart:{},
        data: [{value: 500}, {value: 600}, {value: 700}]
    }
};

Step 4: Pass configurations and render chart

There are two definitive ways of building a FusionCharts in React.js; either it is a part of a component heirarchy or is a lone chart. For a singular FusionCharts, we can choose to make a component class or directly render with the React-FusionCharts component class. The object containing the configurations is passed to the FusionCharts component as 'props':

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

OR

var MyApp = React.createClass({
    ..., // Rest of the React Component Code
    render: function () {
        return (
            <ReactFC {...categoryChartConfigs} />
            <ReactFC {...revenueChartConfigs} />
        );
    }
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);
            

We recommend following the previous method of creating an object and passing it, but these configurations can be passed separately as well:

var chartData = {
        chart: {},
        data: [{value: 500}, {value: 600}, {value: 700}]
    };

ReactDOM.render(
    <ReactFC
        type = "Column2D"
        className = "fc-column2d"  // ReactJS attribute-name for DOM classes
        dataFormat = "JSON"
        dataSource = {chartData}/>,
    document.getElementById('chart-container')
);
            

And your chart should display when you load the page.


Step 1: Include react-fusioncharts.js

In your HTML, include react-fusioncharts.js after all other scripts:


<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/JSXTransformer.js"></script> 
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/react-fusioncharts.min.js"></script>

Step 2: Add the HTML element where FusionCharts is to be rendered

In your HTML, find the section where you wish to add the chart place a <div> for the FusionCharts to be rendered.

<div id='chart-container'></div>

Step 3: Populate required configurations

In your JavaScript code, define an object which consists of all the configurations and their values, required to get FusionCharts up.

var chartConfigs = {
    type: "Column2D",
    className: "fc-column2d", // ReactJS attribute-name for DOM classes
    dataFormat: "JSON",
    dataSource: {
        chart:{},
        data: [{value: 500}, {value: 600}, {value: 700}]
    }
};

Step 4: Creating a parent component

For allowing charts to be interactive, FusionCharts are tied to a common parent ReactJS component. This parent component is responsible for managing the state for all the FusionCharts underneath itself. This state's properties are left open for the user to define. This is helpful when the user needs to store filters or the element which triggered the filter (we will come to this in the later steps).

Let's create a interactive dashboard, having a parent component say 'MyApp' and two FusionCharts (pie and column charts) underneath it. On the click of a slice of the pie chart, the data in the column chart should be updated. This is handled by a configuration 'impactedBy' (explained later in further steps). The object containing the configurations is passed to the FusionCharts component as 'props':

var MyApp = React.createClass({
    ...,
    render: funstion () {
        return (
            <ReactFC {...categoryChartConfigs} />
            <ReactFC {...revenueChartConfigs} />
        );
    }
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);
            

We recommend following the previous method of creating an object and passing it, but these configurations can be passed separately as well:

var chartData = {
    chart: {},
    data: [{value: 500}, {value: 600}, {value: 700}]
};

ReactDOM.render(
    <ReactFC
        type = "Column2D"
        className = "fc-column2d"  // ReactJS attribute-name for DOM classes
        dataFormat = "JSON"
        dataSource = {chartData}/&rt;,
    document.getElementById('chart-container')
);

Step 5: Defining an event's behavior on filter

On click of a slice of pie chart, a filter should be applied with the value of the selected slice.

var categoryChartConfigs = {
    ...,
    events: {
        /***
        ** Slicing event of Pie Chart
        ***/
        slicingStart: function () {

            /***
            **  Call a function which sets the state of 'MyApp'
            **  with this filter value and the 'id' of this pie chart.
            ***/

        }
    }
};
            

Step 6: Storing the filters

Now before we propagate these filters to the other charts, we need to store them from where it can be accessible to other charts. This is done in the function that checks the state of the parent component.

We define a function to be called on the above slicing event, which sets this state with mandatorily two things:

  • filterValue: the value of the selected slice
  • filterSource: the id of the chart which triggered this slicing event

This function is defined in the parent component.

var MyApp = React.createClass({
    ....,
    storeFilters: function (fv, source) {

        /***
        ** Sets the state of 'MyApp'
        ***/
        this.setState({
            filterValue: fv,
            filterSource: source
        });
    },
    render: function () {
        var that = this;

        var categoryChartConfigs = {
                ...,
                events: {
                    slicingStart: function (a,b) {

                        /***
                        ** Calling the function to set state of 'MyApp'
                        ***/
                        that.storeFilters(a.data.categoryLabel, b.sender.id);
                    }
                }
            };

        var revenueChartConfigs = {...};

        /***
        **  Code to filter the
        **  data of column chart
        ***/

        return (
            <ReactFC {...categoryChartConfigs} />
            <ReactFC {...revenueChartConfigs} />
        );
    }
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);
            

Step 7: Propagating the filters

To use the interactive mode using the React-FusionCharts plugin, we need to define two configurations:

  • eventSource: On an event trigger of a chart or an element, if we want to propagate filter(s) further to other charts, we define a configuration eventSource on the impacting chart. This configuration accepts a non-empty string of the id of the chart or the element who triggered those events.
  • impactedBy: If we want a chart to react to an event of another chart or element, we define a configuration impactedBy on the impacted chart. This configuration accepts an array of id(s) of the element(s) who triggers those events.

This is an important step because internally the plugin then compares the value of eventSource with the value of impactedBy of a FusionCharts. If there is a match, it updates itself.

From the state of the parent component MyApp, we pass the value of the property filterSource, to the configuration eventSource:

var MyApp = React.createClass({
    ....,
    storeFilters: function (fv, source) {...},
    render: function () {
        var that = this;

        var categoryChartConfigs = {...};

        var revenueChartConfigs = {
            ...,
            /***
            ** id of the FusionCharts that triggered
            ** event to filter a certain chart
            ***/
            eventSource: this.state.filterSource,
            impactedBy: ['category-chart'],
        };

        /***
        **  Code to filter the
        **  data of column chart
        ***/

        return (
            
            
        );
    }
});

                ReactDOM.render(
                    ,
                    document.getElementById('chart-container')
                );
            

Note: eventSource and impactedBy are mandatory configurations to be set for an impacting chart. But if a chart is just getting impacted, it needs the impactedBy configuration only.

And your chart should display when you load the page with interactivity.



Licensing

React-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include core FusionCharts library in your page. This ReactJS charts plugin project provides no direct functionality. Evaluation version can be downloaded from this page. You will still need to purchase a FusionCharts license for using it in commercial environment (FusionCharts is free for non-commercial and personal use).