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.
Downloading the Component
You can download the React-FusionCharts component from here.
Installing the React-FusionCharts Component
To install the React-FusionCharts component for your applications, follow the steps given below:
Step 1: Include
In your HTML, include the
fusioncharts.js and the
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
<div> HTML container element, which will be used to render the chart, as shown below:
Step 3: Define the Chart Configuration
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:
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:
Once the installation is complete, you are ready to start creating and customizing your charts using the React-FusionCharts component. Read on to see how.
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).