React Native Component for FusionCharts

Easy to use React Native component for FusionCharts to take your Android and iOS applications to a whole new level

Download Free Trial

Add React Native charts and graphs like area, bar, donut, line, marimekko, radar, stockcharts and 150+ other charts & 1000+ maps for your anroid and iOS application. Using FusionCharts’ React Native component you can create charts which are mobile-friendly, interactive, and, support zooming, panning, APIs, animation, drill-downs, real-time updates, and even full exporting of charts & dashboards.

It also comes with event support for touch, swipe, and more, enabling you to make your charts more reactive during any lifecycle phase of the application. Further, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the React Native component is completely open source and actively maintained by a team of dedicated developers.

Features

  • Adds chart to your react native Android/iOS app.
  • Adds a chart using just one single component.
  • Auto-updates the chart object when the data source is updated.
  • Allows you to enable interactivity between JavaScript charts.
  • Control fusioncharts chart instance using various APIs and event methods.

Quick Demo

A Simple Chart
Quick demo

Quick Start

Step 1 : Install the FusionCharts React Native component

In your react native project install FusionCharts react native component:

$ $ npm install react-native-fusioncharts --save

Step 2 : Setup for different platforms

For Android follow the below steps :

  • Create assets folder in android/app/src/main directory if it doesn't exist.
  • Copy FusionCharts library in the assets folder (in most cases copy node_modules/fusioncharts folder).
  • Create a file named fusioncharts.html in this assets folder with the required FusionCharts module files which you've copied from node_modules. Find the sample html file here.
  • Set libraryPath property to the FusionCharts component as follows:
    <FusionCharts 
    ......
    libraryPath={{ uri: 'file:///android_asset/fusioncharts.html' }}/>
    
  • Add the following script in Application's package.json file as follows to bundle your assets when you want to genarate a signed APK:
    ......
    "scripts": {
    ......
    "clean:build:android": "rm -rf android/app/build",
    "prod:android": "npm run clean:build:android  && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res"
    },
    ......
    
  • Now run the following command before genarating the signed APK:
    $ npm run prod:android
    

Click here to find more information about genarating signed APK for Android.

For iOS follow the below steps :

  • Create assets folder in your project root if it doesn't exist.
  • Copy FusionCharts library in this assets folder (requires only when the licensed version of FusionCharts is used).
  • Create a file named fusioncharts-tpl.html in this assets folder with the required FusionCharts module files. Find the sample html file here.
  • Add a build:assets script in Application's package.json file as follows:
    ......
    "scripts": {
    ......
    "build:assets": "fc-build-assets --fc-template ./assets/fusioncharts-tpl.html --fc-library ./assets/fusioncharts"
    },
    ......
    
    The --fc-library ./assets/fusioncharts option is only required when you copied FusionCharts library in your assets folder.

Notes: fc-build-assets is an utility binary provided by react-native-fusioncharts to package the FusionCharts modules(.js files) referenced in template(.html file) as needed by the React Native iOS build process.

  • Run the following command before running the app:
    $ npm run build:assets
    

Step 3 : Create a simple chart

Include the react-native-fusioncharts component as follows: The App.js file

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

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      type: 'column2d',
      width: '100%',
      height: '100%',
      dataFormat: 'json',
      dataSource: {
        chart: {
          caption: "Harry's SuperMart",
          subCaption: 'Top 5 stores in last month by revenue',
          numberprefix: '$',
          theme: 'fint'
        },
        data: [
          { label: 'Bakersfield Central', value: '880000' },
          { label: 'Garden Groove harbour', value: '730000' },
          { label: 'Los Angeles Topanga', value: '590000' },
          { label: 'Compton-Rancho Dom', value: '520000' },
          { label: 'Daly City Serramonte', value: '330000' }
        ]
      }
    };

    this.libraryPath = Platform.select({
      // Specify fusioncharts.html file location
      ios: require('./assets/fusioncharts.html'),
      android: { uri: 'file:///android_asset/fusioncharts.html' }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>
          FusionCharts Integration with React Native
        </Text>
        <View style={styles.chartContainer}>
          <FusionCharts
            type={this.state.type}
            width={this.state.width}
            height={this.state.height}
            dataFormat={this.state.dataFormat}
            dataSource={this.state.dataSource}
            libraryPath={this.libraryPath} // set the libraryPath property
          />
        </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);

Licensing

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