Create a Chart in React Native using FusionCharts

FusionCharts is a JavaScript charting library that enables you to create interactive charts, gauges, maps, and dashboards in JavaScript. The 'react-native-fusioncharts' component allows you to easily add rich and interactive charts to any React-Native project. On this page, we'll see how to install FusionCharts and render a chart using the 'react-native-fusioncharts' component.

Prerequisite (expo cli / react-native cli)

We are assuming that you have a 'react-native project' up and running. If not, follow the steps here to get started with your React-Native project setup.

IMPORTANT NOTE: Install react-native-web if not present already.

Create an application using FusionCharts – with Expo

Using FusionCharts with Expo, you can create your application. First, ensure you have 'Node.js' and 'Git' installed in your environment. For more details, you can check the official Expo documentation.

To get started, open the Command Prompt and run the following command to create a new application:

expo init My-test-appCOPY

Return to the previously created application folder: 'cd My-test-app'

Installation and Including Dependencies

To complete the installation, including the dependencies, run the following code:

npm i @unimodules/react-native-adapter
npm i react-native-fusioncharts --forceCOPY

Now, in the root folder of the application, create the 'metro.config.js' file and include the following code:

const { getDefaultConfig } = require('@expo/metro-config');
module.exports = (async () => {
    const {
      resolver: { sourceExts, assetExts }
    } = await getDefaultConfig(__dirname)
    return {
      transformer: {
        defaultConfig: async () => ({
          transform: {
            experimentalImportSupport: false,
            inlineRequires: false
          }
        })
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'fcscript']
      }
    }
  })()COPY

Preparing the Data

Let's create a chart showing the "Countries With Most Oil Reserves". The the oil reserves data present in various countries is shown in tabular form below.

Since we are plotting a single dataset, let us create a column 2D chart with 'countries' as data labels along the x-axis and 'No. of oil reserves' as data values along the y-axis. Then, let us prepare the data for a single-series chart.

FusionCharts accepts the data in JSON format. So the above data in the tabular form will look as shown below.

// 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"
  }
];COPY

Configure Your Chart

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

// 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 Oil 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
  }
};COPY

The 'type' attribute in the chartConfigs object signifies the type of chart being rendered. Have a look at different chart types with their aliases here.

Render the Chart

Finally, get ready to render your first chart using the react-native-fusioncharts component. In your "App.js" file, replace your entire code with the code sample below, Example.

The JavaScript code to create a chart in Android and iOS is the same.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Platform } from 'react-native';
import ReactNativeFusionCharts from 'react-native-fusioncharts';

export default class App extends Component {
  constructor(props) {
    super(props);
    //STEP 2 - Chart Data
    const chartData = [
      { label: "Venezuela", value: "250" },
      { 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 - Chart Configurations
    const chartConfig = {
      type: "column2D",
      width: "100%",
      height: "400",
      dataFormat: "json",
      dataSource: {
        chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subCaption: "In MMbbl = One Million barrels",
          xAxisName: "Country",
          yAxisName: "Reserves (MMbbl)",
          numberSuffix: "K",
          theme: "fusion",
          exportEnabled: 1 // to enable the export chart functionality
        },
        data: chartData
      }
    };

    this.state = {
      chartConfig
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>
          FusionCharts Integration with React Native
        </Text>
        <View style={styles.chartContainer}>
          <ReactNativeFusionCharts
            chartConfig={this.state.chartConfig}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10
  },
  heading: {
    fontSize: 20,
    textAlign: 'center',
    marginBottom: 10
  },
  chartContainer: {
    height: 200
  }
});

// skip this line if using Create React Native App
AppRegistry.registerComponent('ReactNativeFusionCharts', () => App);COPY

See Your Chart below

You should be able to see the chart as shown below.

If you are getting a JavaScript error on your page, check your browser console for the exact error and fix it accordingly. If you're unable to solve it, click here to get in touch with our support team.

That's it! Your first chart using react-native-fusioncharts is ready.

Visit the React-Native Features page to learn more about working with events, methods, and more.

Create an application using FusionCharts – with React-Native CLI

For users who want to learn how to create an application using React-Native CLI, first ensure you have the latest versions of Node and JDK installed in your environment. The dependencies for Android and iOS emulators should also be set up properly. Check the official React-Native documentation for more details.

First, open the Command Prompt and run the following command to install the React-Native CLI:

npm install -g react-native-cliCOPY

Next, to create the new application, run the following command in Command Prompt:

react-native init My-test-appCOPY

To access your application, run the command:

cd My-test-appCOPY

A new application named ‘My-test-app’ is created. Update its code to include charts that you need to get displayed, or Check our instructions for more details.

Finally, to run your application on a connected Android device or an emulator, execute the following command:

npx react-native run-androidCOPY

Or, to run it on an iOS device or simulator, execute the following command:

npx react-native run-iOSCOPY

Run the Expo Application

You can also use React-Native CLI to run applications created with Expo. You can do so by following the steps below:

Open the Command Prompt and run the following command:

npm install -g react-native-cliCOPY

Next, to create the new application, run the following command in Command Prompt:

react-native init My-test-appCOPY

To access your application, run the command:

cd My-test-appCOPY

You have finished updating the code and accessed your application’s folder. Now run the following command:

expo ejectCOPY

The Expo application will create an /Android and an /IOs folders in your application, allowing you to run it using 'React-Native CLI'.

Make sure you have configured your environment dependencies for Android and iOS emulators. For more information, check the official React Native documentation.

Finally, to run your application on Android, run the command:

npx react-native run-androidCOPY

Or, to run your application on iOS, use the command:

npx react-native run-iOSCOPY

After installing react-native-fusioncharts, follow the steps below:

It is required to add the .fcscript into the asset extensions section of the 'metro.config.js' file, or create that file within your project and configure it as shown below:

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
      resolver: { sourceExts, assetExts }
  } = await getDefaultConfig()
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false
              }
          })
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'fcscript']
      }
    }
})()COPY

Visit the React-Native Features page to learn more about working with events, methods, and more.