Introduction to FusionCharts ReactJS Wrapper

FusionCharts Suite XT includes an extensive range of charts, gauges, and maps that you can use to plot static as well as real-time data.

The React-FusionCharts plugin, along with FusionCharts Suite XT, lets you add interactive JavaScript charts and graphs to your web and mobile applications using only a single ReactJS component.

Downloading the Plugin

You can download the React-FusionCharts plugin from here.

Installing the React-FusionCharts Plugin

To install the React-FusionCharts plugin for your applications, follow the steps given below:

Step 1: Include fusioncharts.js and react-fusioncharts.js

In your HTML, include the fusioncharts.js and the react-fusioncharts.js JavaScript files, as shown in the code below:

<script type="text/javascript" src="/path/to/fusioncharts.js"></script>
<script type="text/javascript" src="/path/to/react.js"></script>
<script type="text/javascript" src="/path/to/react-fusioncharts.js"></script>

It is mandatory that the react-fusioncharts.js file be included after all other script files.

Step 2: Add the HTML Container Element to Render the Chart

Add a <div> HTML container element, which will be used to render the chart, as shown below:

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

Step 3: Define the Chart Configuration

As shown in the code below, in your JavaScript code, define an object that contains the configuration for a FusionCharts Suite XT chart. Set the chart data source using the regular [FusionCharts JSON format]tutorials/getting-started/your-first-charts/building-your-first-chart.md{:target=’_blank’}.

var chartConfigs = {
    type: ...,
    renderAt: ...,
    className: ...,
    dataFormat: ...,
    dataSource: ...,
    chart: {
        /** Define chart attributes required to configure the chart **/
    },
    data: [
        /** Define data labels and data values for data plots **/
    ]
};

Step 4: Render the Chart

The chart object is now passed to the FusionCharts component as the props object. The chart is then rendered using the FusionCharts tag, as shown in the code below:

<react_fc.FusionCharts {...chartConfigs} />

An Alternative Method for Passing Chart Configuration

The alternative method for passing chart configuration combines steps 3 and 4, as shown in the code below:

React.render(
    <react_fc.FusionCharts
        type: ...,
        renderAt: ...,
        className: ...,
        dataFormat: ...,
        dataSource: ... />,
    document.getElementById('chart-container')
);

Once the installation is complete, you are ready to start creating and customizing your charts using the React-FusionCharts plugin. Read on to see how.

Licensing

React-FusionCharts 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 an evaluation. You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).