Coding

An Ultimate Guide to Data Visualization in your React Applications

Let’s face it, making charts in React applications has always been tricky. Furthermore, developers need to take care of a number of...

Written by Danial Roncaglia · 14 min read >
Data Visualization in your React Applications

Let’s face it, making charts in React applications has always been tricky. Furthermore, developers need to take care of a number of factors while making charts in React, like the chart type, design, colors, background, values, data sets, options, and more. Fortunately, JavaScript charting libraries like FusionCharts have made it easier to create charts in React applications. Widely regarded as one of the best data-visualization tools, FusionCharts is a JavaScript charting library that helps web and mobile developers generate charts, gauges, and maps to power dashboards. 

With 100-plus chart types and 2,000-plus maps, FusionCharts not only helps you create interactive charts for web applications but also allows you to add smart reporting features such as chart export, drill down, selective display of data, and scroll and zoom to your charts.

Let’s find out how to create charts in React applications using FusionCharts. But before getting into the nitty-gritty, let’s find out why you should create charts in React applications using FusionCharts.

Reasons Why You Should Create Charts in React Applications Using FusionCharts

With the help of FusionCharts, developers can effortlessly create beautiful charts in React applications and then add advanced reporting capabilities such as unlimited drill-down and chart export in a matter of minutes. Here are some of the main reasons you should create charts in React applications using FusionCharts.

Wide array of chart types

Data Visualization in your React Applications

FusionCharts offers you a plethora of chart types. Be it a simple column or pie chart, specialized sales, marketing charts, or advanced zoom and scroll charts, FusionCharts covers all your charting requirements. 

Easy to use

FusionCharts makes the chart-creation process in React applications an easy and painless experience. Due to the fact that it uses XML/JSON as its data interface, all you need to do is convert your data into XML/JSON using a programming language or the visual GUI provided in the FusionCharts for creating interactive charts. 

Animated and interactive charts

With FusionCharts, you can quickly and easily render animated charts that have a lot of interactive options for end users. Furthermore, different chart types support different forms of animation and interactivity, thereby providing a unique experience to end users. 

Customizable

One of the many things you will love about FusionCharts is that almost everything is customizable. From captions to point color, you can customize everything to your requirements. 

Accessible company data

Due to the fact that FusionCharts is cloud-based visualization software, you and your developers can access reports anytime and anywhere. 

With the help of this JavaScript charting library, developers can create interactive charts for web and enterprise applications in React quickly and effortlessly. 

Now that we know why FusionCharts is one of the best data visualization tools and why it is the perfect choice for creating charts in React applications, let’s find out how to create charts in React applications using FusionCharts.

Steps to Create Charts in a React Application Using FusionCharts

Creating charts in React applications using FusionCharts is pretty straightforward. Simply follow these steps:

Step 1: Set up a React project

To create a chart in a React application, you need to first set up a React project. One of the best ways to set up the environment is using create-react-app.

Open the terminal and enter this code:

npx create-react-app first-fusioncharts-project
cd first-fusioncharts-project
npm start

Step 2: Install FusionCharts and include dependencies

Once you have set up the React project, install the react-fusioncharts and fusioncharts modules using the following command:

npm install fusioncharts react-fusioncharts –save

Once you have installed the FusionCharts components, you can replace the code in the App.js file with the code shown in the steps below to create your first chart. Make sure you import all the required dependencies to get started. 

// Step 1 – Include react
import React from “react”;

// Step 2 – Include the react-fusioncharts component
import ReactFC from “react-fusioncharts”;

// Step 3 – Include the fusioncharts library
import FusionCharts from “fusioncharts”;

// Step 4 – Include the chart type
import Column2D from “fusioncharts/fusioncharts.charts”;

// Step 5 – Include the theme as fusion
import FusionTheme from “fusioncharts/themes/fusioncharts.theme.fusion”;

// Step 6 – Adding the chart and theme as dependency to the core fusioncharts
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

Step 3: Prepare the data

Once you have installed FusionCharts and have included the dependencies, you need to prepare the chart data. In the following example, the data of fossil fuel reserves present in various countries is shown in tabular form:

CountryNo. of fossil fuel reserves
Venezuela290K
Saudi Arabia260K
Canada 180K
Iran140K
Russia115K
UAE100K
US30K
China30K

FusionCharts accepts the data in JSON format. So the above data will take the below shape.

// Preparing the chart data
const chartData = [
  {
    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”
  }
];

Step 4: Configure your chart

Now that the data for your chart is ready, let’s work on styling, positioning, and giving your chart context. 

Height and width: The size of the chart is defined using ‘width’ and ‘height’ attributes.

Type: ‘Type’ defines the type of chart you are going to plot.

Chart: The ‘chart’ object under ‘DataSource’ contains chart configuration options like theme and display formats for numbers. 

// Create a JSON object to store the chart configurations
const chartConfigs = {
  type: “column2d”, // The chart type
  width: “700”, // Width of the chart
  height: “400”, // Height of the chart
  dataFormat: “json”, // Data type
  dataSource: {
    // Chart Configuration
    chart: {
      caption: “Countries With Most fossil fuel Reserves [2017-18]”,    //Set the chart caption
      subCaption: “In MMbbl = One Million barrels”,             //Set the chart subcaption
      xAxisName: “Country”,           //Set the x-axis name
      yAxisName: “Reserves (MMbbl)”,  //Set the y-axis name
      numberSuffix: “K”,
      theme: “fusion”                 //Set the theme for your chart
    },
    // Chart Data – from step 2
    data: chartData
  }
};

Step 5: Render the chart

Now, with all the pieces of the puzzle solved, it is time to combine everything from above and render the Simple Chart. Here’s the consolidated code to render the Simple Chart. 

// STEP 1 – Include Dependencies
// Include react
import React from “react”;
import ReactDOM from “react-dom”;

// Include the react-fusioncharts component
import ReactFC from “react-fusioncharts”;

// Include the fusioncharts library
import FusionCharts from “fusioncharts”;

// Include the chart type
import Column2D from “fusioncharts/fusioncharts.charts”;

// Include the theme as fusion
import FusionTheme from “fusioncharts/themes/fusioncharts.theme.fusion”;

// Adding the chart and theme as dependency to the core fusioncharts
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

// STEP 2 – Chart Data
const chartData = [
  {
    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”
  }
];

// STEP 3 – Creating the JSON object to store the chart configurations
const chartConfigs = {
  type: “column2d”, // The chart type
  width: “700”, // Width of the chart
  height: “400”, // Height of the chart
  dataFormat: “json”, // Data type
  dataSource: {
    // Chart Configuration
    chart: {
      //Set the chart caption
      caption: “Countries With Most fossil fuel Reserves [2017-18]”,
      //Set the chart subcaption
      subCaption: “In MMbbl = One Million barrels”,
      //Set the x-axis name
      xAxisName: “Country”,
      //Set the y-axis name
      yAxisName: “Reserves (MMbbl)”,
      numberSuffix: “K”,
      //Set the theme for your chart
      theme: “fusion”
    },
    // Chart Data
    data: chartData
  }
};

// STEP 4 – Creating the DOM element to pass the react-fusioncharts component
class App extends React.Component {
  render() {
    return (<ReactFC {…chartConfigs} />);
  }
}

export default App;

Once you have rendered the chart, you should be able to see the Simple Chart, as shown below:

Data Visualization in your React Applications

Now that you know how to create a simple chart in React application using FusionCharts, let’s find out about some other features of FusionCharts. Here are some chart demos that are created using FusionCharts in React applications. 

World map

To render a world map chart, you need to use the following consolidated code:

import React, { Component } from ‘react’

import FusionCharts from ‘fusioncharts’;

import Maps from ‘fusioncharts/fusioncharts.maps’;

import World from ‘fusioncharts/maps/fusioncharts.world’;

import ReactFC from ‘react-fusioncharts’;

import FusionTheme from ‘fusioncharts/themes/fusioncharts.theme.fusion’;

ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);

const chartConfigs = {

  type: ‘world’,

  width: 600,

  height: 400,

  dataFormat: ‘json’,

  dataSource: {

    “chart”: {

      “caption”: “Average Annual Population Growth”,

      “subcaption”: ” 1965-2018″,

      “numbersuffix”: “%”,

      “includevalueinlabels”: “1”,

      “labelsepchar”: “: “,

      “entityFillHoverColor”: “#FFF9C4”,

      “theme”: “fusion”

    },

    “colorrange”: {

      “minvalue”: “0”,

      “code”: “#FFE0B2”,

      “gradient”: “1”,

      “color”: [

        {

          “minvalue”: “0.5”,

          “maxvalue”: “1.0”,

          “color”: “#FFD74D”

        },

        {

          “minvalue”: “1.0”,

          “maxvalue”: “2.0”,

          “color”: “#FB8C00”

        },

        {

          “minvalue”: “2.0”,

          “maxvalue”: “3.0”,

          “color”: “#E65100”

        }

      ]

    },

    “data”: [

      {

        “id”: “SA”,

        “value”: “.82”,

        “showLabel”: “1”

      },

      {

        “id”: “NA”,

        “value”: “2.04”,

        “showLabel”: “1”

      },

      {

        “id”: “AS”,

        “value”: “1.78”,

        “showLabel”: “1”

      },

      {

        “id”: “AF”,

        “value”: “.40”,

        “showLabel”: “1”

      },

      {

        “id”: “EU”,

        “value”: “2.58”,

        “showLabel”: “1”

      },

      {

        “id”: “AU”,

        “value”: “1.30”,

        “showLabel”: “1”

      }

    ]

  },

};

export default class App extends Component {

  render () {

    return <ReactFC {chartConfigs} />;

  }

}

Once you have rendered the world map chart, you should be able to see the world map as shown below:

Data Visualization in your React Applications

Simple gauge demo

To render a simple gauge chart, check the following consolidated code:

import React, { Component } from ‘react’;

import FusionCharts from ‘fusioncharts’;

import Widgets from ‘fusioncharts/fusioncharts.widgets’;

import ReactFC from ‘react-fusioncharts’;

import FusionTheme from ‘fusioncharts/themes/fusioncharts.theme.fusion’;

ReactFC.fcRoot(FusionCharts, Widgets, FusionTheme);

const chartConfigs = {

  type: ‘angulargauge’,

  width: 600,

  height: 400,

  dataFormat: ‘json’,

  dataSource: {

    “chart”: {

      “caption”: “USA Customer Satisfaction Score for 2018”,

      “lowerLimit”: “0”,

      “upperLimit”: “100”,

      “showValue”: “1”,

      “numberSuffix”: “%”,

      “theme”: “fusion”,

      “showToolTip”: “0”

    },

    “colorRange”: {

      “color”: [

        {

          “minValue”: “0”,

          “maxValue”: “25”,

          “code”: “#F2726F”

        },

        {

        “minValue”: “25”,

        “maxValue”: “75”,

        “code”: “#FFC533”

        },

        {

          “minValue”: “75”,

          “maxValue”: “100”,

          “code”: “#62B58F”

        }

      ]

    },

    “dials”: {

      “dial”: [

        {

          “value”: “75”

        }

      ]

    }

  },

};

export default class App extends Component {

  render () {

    return <ReactFC {…chartConfigs} />;

  }

}

Once you have rendered the chart, you should be able to see the simple gauge chart, as shown below:

Data Visualization in your React Applications

Data binding demo

To render it, you need to use the following consolidated code:

import React, { Component } from ‘react’;

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 chartConfigs = {

  type: ‘column2d’,

  width: 600,

  height: 400,

  dataFormat: ‘json’,

  dataSource: {

    “chart”: {

      “caption”: “Countries With Most Fossil Fuel [2018-19]”,

      “subCaption”: “In MMbbl = One Million barrels”,

      “xAxisName”: “Country”,

      “yAxisName”: “Reserves (MMbbl)”,

      “numberSuffix”: “K”,

      “theme”: “fusion”,

      “updateAnimDuration”: “0.4”

    },

    “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”

      }

    ]

  },

};

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = chartConfigs;

    this.updateData = this.updateData.bind(this);

  }

  // This function generates random number.

  getRandomNumber() {

    var max = 290, min = 30;

    return Math.round(((max – min) * Math.random()) + min);

  }

  // Handler for update button.

  // Randomly updates the values of the chart.

  updateData() {

    var prevDs = Object.assign({}, this.state.dataSource);

    prevDs.data[2].value = this.getRandomNumber();

    prevDs.data[3].value = this.getRandomNumber();

    this.setState({

      dataSource: prevDs,

    });

  }

  render() {

    return (

      <div>

        <ReactFC {…this.state} />

         <center>

           <button

             className=’btn btn-outline-secondary btn-sm’

             onClick={this.updateData}

           >

             Change Chart Data

           </button>

        </center>

      </div>

    );

  }

}

Data Visualization in your React Applications
Data Visualization in your React Applications

Life cycle events demo

To showcase life cycle events, check the following snippet of code:

import React, { Component } from “react”;

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 chartConfigs = {

  type: “column2d”,

  width: 600,

  height: 400,

  dataFormat: “json”,

  dataSource: {

    “chart”: {

      “caption”: “Countries With Most Fossil Fuel [2018-19]”,

      “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”

      }

    ]

  }

};

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      message:

        “You will see a notifications here for the chart lifecycle events”

    };

    this.beforeDataUpdate = this.beforeDataUpdate.bind(this);

    this.dataUpdated = this.dataUpdated.bind(this);

    this.drawComplete = this.drawComplete.bind(this);

    this.renderComplete = this.renderComplete.bind(this);

  }

  // Callback handler for event ‘beforeDataUpdate’.

  beforeDataUpdate() {

    this.state.message = [<strong>Status: </strong>, ” beforeDataUpdate”];

  }

  // Callback handler for event ‘dataUpdated’.

  dataUpdated() {

    let newMessage = this.state.message.slice();

    newMessage.push(“, dataUpdated”);

    this.setState({

      message: newMessage

    });

  }

  // Callback handler for event ‘drawComplete’.

  drawComplete() {

    let newMessage = this.state.message.slice();

    newMessage.push(“, drawComplete”);

    this.setState({

      message: newMessage

    });

  }

  // Callback handler for event ‘renderComplete’.

  renderComplete() {

    let newMessage = this.state.message.slice();

    newMessage.push(“, renderComplete”);

    this.setState({

      message: newMessage

    });

  }

  render() {

    return (

      <div>

        <ReactFC

          {…chartConfigs}

          fcEvent-beforeDataUpdate={this.beforeDataUpdate}

          fcEvent-dataUpdated={this.dataUpdated}

          fcEvent-drawComplete={this.drawComplete}

          fcEvent-renderComplete={this.renderComplete}

        />

        <p style={{ padding: “10px”, background: “#f5f2f0” }}>

          {this.state.message}

        </p>

      </div>

    );

  }

}

Data Visualization in your React Applications
Data Visualization in your React Applications

Final Takeaway

Whether you want to create a simple chart or pie chart or an advanced zoom and scroll chart in a React app, using FusionCharts to make it would be your best bet. Widely regarded as one of the best data-visualization tools, FusionCharts leverages JavaScript (HTML5) and Flash to create stunning data visualizations unmatched by conventional server-side components. As this JavaScript charting library works with both XML and JSON data, it can be integrated with databases and any server-side technology like ASP, PHP, and JSP, among others. While creating charts in React applications using FusionCharts may seem like a daunting task, the process is fairly simple and straightforward.

By following the above steps, you can quickly and effortlessly create beautiful charts in React applications using FusionCharts.

The FusionCharts React package gives you the best of both worlds. You can use the power of JavaScript to embed and manipulate the charts while taking full advantage of FusionCharts’ powerful charting engine.

FusionCharts is a very simple library to use and has support for all the latest technologies like Angular, Vue, and React. The React documentation shows the components that are available by default, but it might be worth your time to check out the FusionCharts documentation to see where you can customize the library for your next project.

Leave a Reply