@highcharts/highcharts-react-native

Highcharts React Native

Official minimal Highcharts wrapper for React Native.

Table of Contents

1. Getting started
   1. General prerequisites
   2. Installing
   3. Using
      1. Basic usage example
      2. Highcharts chart
      3. Highcharts live data update
      4. Highcharts advanced series
      5. Optimal way to update
2. Options details
   1. options
   2. styles
   3. modules
   4. callback
   5. useSSL
   6. useCDN
   7. data
   8. onMessage
   9. loader
   10. webviewStyles
   11. setOptions
   12. devPort
3. Get repository
4. FAQ
   1. Where to look for help?
   2. Files are not loaded
   3. Error loading page
5. Changelog

Getting Started

General prerequisites

Make sure you have Node.JS, NPM and React up to date. Tested and required versions:

• node 11.2+
• npm 6.7.0+ or similar package manager

Packages which should be installed within your project:

• React >=16.4+
• React Native >=0.63.2

If you're using this package with Expo Tools, please make sure your Expo SDK version is higher than or equal to v38.0.0, otherwise use the v2.2.3 version of this package, which should work from v33.0.0.

Installing

Get package from NPM in your React app:

npm install @highcharts/highcharts-react-native

You can either install this wrapper within app based on Expo tools, or bare React Native app.

It is required to add the .hcscript into the asset extensions section of metro.config.js file, or create that file within your project, and configure it like 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, 'hcscript']
      }
    }
})()

Usage

Basic usage example

Import this package into your React Native project and render the chart:

Highcharts chart

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, 2, 3]
                }]
            }
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        justifyContent: 'center',
        flex: 1
    }
});

Highcharts live data update

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: {
                chart: {
                    events: {
                        load: function () {

                            // set up the updating of the chart each second
                            var series = this.series[0];
                            setInterval(function () {
                                var y = Math.random();
                                series.addPoint(y, true, true);
                            }, 1000);
                        }
                    }
                },
                series: [{
                    data: [1, 2, 3]
                }]
            }
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        justifyContent: 'center',
        flex: 1
    }
});

Using Highcharts modules e.g solid-gauge, drilldown, or exporting

import React from 'react';
import { StyleSheet, View } from 'react-native';
import HighchartsReactNative from '@highcharts/highcharts-react-native'

const modules = [
    'solid-gauge'
];

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

        this.state = {
            chartOptions: {
                chart: {
                    type: 'solidgauge'
                },
                series: [{
                    data: [1]
                }]
            }
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                    modules={modules}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        justifyContent: 'center',
        flex: 1
    }
});

Optimal way to update

A good practice is to keep all chart options in the state. When setState is called, the options are overwritten and only the new ones are passed to the chart.update method.

import React from 'react';
import {
    StyleSheet,
    View,
    Button
} from 'react-native';
import HighchartsReactNative from '@highcharts/highcharts-react-native'

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

        this.state = {
            chartOptions: {
                title: {
                    text: 'Default title'
                },
                tooltip: {
                    formatter: function () {
                        return 'Point Y: ' + this.y;
                    }
                },
                series: [{
                    data: [1, 3, 2]
                }]
            }
        };
    }

    chartUpdate() {
        this.setState({
            chartOptions: {
                title: {
                    text: 'Updated chart'
                },
                tooltip: {
                    formatter: function () {
                        return 'Point value: ' + this.y;
                    }
                }
            }
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                />
                <Button
                    onPress={this.chartUpdate.bind(this)}
                    title='Chart update'
                    color='#000'
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 200,
        backgroundColor: '#fff',
        justifyContent: 'center',
        flex: 1
    }
});

Options details

Available properties:

  <HighchartsReact
    styles={styles}
    webviewStyles={webviewStyles}
    options={this.state.chartOptions}
    modules={modules}
    callback={chartCallback}
    useSSL={true}
    useCDN={true} // or string 'mydomain.com/highchartsfiles/'
    data={'Data to be stored as global variable in Webview'}
    onMessage={message => this.onMessage(message)}
    loader={ true }
    devPort={'xxx.xxx.xxx.xxx:xxxxx'} // i.e 192.168.0.1:12345
    setOptions={highchartsGlobalOptions}
  />

Parameter	Type	Required	Description
styles	Object	no	You can style your container using JavaScript like in the regular react and react native.
options	Object	yes	Highcharts chart configuration object. Please refer to the Highcharts API documentation. This option is required.
modules	Array	no	List of modules which should be added to Highcharts. I.e when you would like to setup solidgauge series which requires highcharts-more and solid-gauge files, you should declare array: const modules = ['solid-gauge']
callback	Function	no	A callback function for the created chart. First argument for the function will hold the created chart. Default this in the function points to the chart. This option is optional.
useCDN	Boolean	no	Set the flag as true, if you would like to load files (i.e highcharts.js) from CDN instead of local file system. You can declare an url to your domain (i.e mydomain.com/highchartsfiles/)
useSSL	Boolean	no	Set the flag as true, if you would like to load files (i.e highcharts.js) by SSL. (The useCDN flag is mandatory).
data	any	no	Data to be stored as global variable in Webview.
onMessage	Function	no	Global communication between Webview and App. The function takes the message as the first argument.
loader	Boolean	no	Set the flag to true, if you would like to show loader while chart is loading.
webviewStyles	Object	no	You can style your webview using JavaScript object structured like in the regular React and React Native apps.
setOptions	Object	no	Options which are set for Highcharts through Highcharts.setOptions() method. Usually it is used to set the global and lang options. For more details please visit Highcharts documentation, and API.
devPort	String	no	When using EXPO in DEV mode, you may declare address and port to actually load the html file in Android. You cannot use built-in file:/// when using Expo,because the Android and iOS folders don’t exist yet. When it’s in STAGING or PROD skip this option and use default the file:///android_asset path.

Get repository

Clone github repository and install dependencies:

git clone https://github.com/highcharts/highcharts-react-native
cd highcharts-react-native
npm install

FAQ

Where to look for help?

Technical support will help you with Highcharts and with the wrapper.

If you have a bug to report or an enhancement suggestion please submit Issues in this repository.

Files are not loaded

1. Put the files (i.e. Folder: highcharts-layout and highcharts-files) to android/app/src/main/assets and /ios

2. Use release mode instead of debug mode run react-native run-android --variant=release

Error loading page

In the package.json remove the "main": "node_modules/expo/AppEntry.js" line.

Changelog

3.0

• The way of getting Highcharts javascript files has changed.

Bugfixes:

• #39 - Chart not redering in iOS,
• #51 - Chart not rendering on Android Simulator using EXPO cli,
• #61 - [Error] Element ref was specified as a string but no owner was set.,
• #67 - load event not executing,
• #70 - HighchartsReactNative Not working if expo published,
• #73 - Highchart disappears in landscape mode,
• #82 - Unable to set backgroundColor due to old version of react-native-webview,
• #85 - Error: Failed to compile,
• #86 - Can't render the chart on Android