Creating Mobile Charts with Highcharts & React Native

In this tutorial, we will show you how to get started with the official Highcharts wrapper for React Native. We will begin with setting up the environment, then jump to create a simple demo of Highcharts.

Set up the environment

For this project, we will use Expo App tool to create a simple app and focus only on the code.

Installation

Since the Expo App tool is used regularly, it is a good practice to install it globally. To do so, open the terminal and run the following command line with the option -g for global: $npm install -g expo-cli

To create our application “hcreact,” run this command $expo init hcreact

The previous command line creates a folder with a default project.
Let’s run the project, as is, to be sure that everything is correctly set up before making changes to the project.
Return to the terminal and run these commands:
$ cd hcreact/
$ npm start

The npm start command will launch a server on port 19000, and you may test your app in a iOS / Android emulator or use your mobile phone.

To learn more about expo, you go here.

Next step is to setup Highcharts React Wrapper. First, stop the running project on the terminal using Ctrl+c, then run this command line to install the Highcharts React Native wrapper:

$ npm install @highcharts/highcharts-react-native

Now, we are ready to add our own code.

Highcharts chart

In the App.js file, import highcharts-react-native-official.

import HighchartsReactNative from '@highcharts/highcharts-react-native';

A simple chart to start with is a line chart with the following data:[1, 3, 2]. To achieve that, we need to create an object (options) then pass the data:

this.state = {
            chartOptions: {
                series: [{
                    data: [1, 3, 2]
                }]
            }
        };

The last step is to initialize Highcharts.

<HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                    modules={modules}
/>

Code of App.js

import React from 'react';
import {
    StyleSheet,
    View
} from 'react-native';
import HighchartsReactNative from '@highcharts/highcharts-react-native';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            chartOptions: {
                series: [{
                    data: [1, 3, 2]
                }]
            }
        };
    }
    render() {
        return (
            <View>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                    modules={modules}
                / >
            </View >
        );
    }
}
const styles = StyleSheet.create({
    container: {
        // height: 200,
        // width: 200,
        backgroundColor: '#fff',
        justifyContent: 'center'
    }
});

That is it, now you know how to set up a project using Highchart wrapper React Native. Feel free to share your experience, questions and comments below.