Natural Pacifist Manatees

    highcharts-react-native-ext

    3.1.8 • Public • Published

    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
    • React Native Webview >=10.6.0

    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.

    In bare Ract Native application you need to also install the react-native-unimodules package, and configure the content of ios and android build directiories like it's described here.

    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

    3.0.1

    • Moved the react, react-native-unimodules, react-native-webview packages into peerDependencies.
    • Docs improved

    3.1.0

    • The package.json cleaned-up, unused dependencies removed.
    • Unhandled promise rejections resolved
    • Docs improved

    Bugfixes:

    • #91 - Error expo without expo and no charts

    3.1.1:

    • Restored the react-native-webview back into the peerDependencies.
    • Docs improved

    3.1.2

    • Docs improved Bugfixes:
    • [#92] - Charts sometimes fail to render

    Install

    npm i highcharts-react-native-ext

    DownloadsWeekly Downloads

    8

    Version

    3.1.8

    License

    SEE LICENSE IN <LICENSE>

    Unpacked Size

    800 kB

    Total Files

    54

    Last publish

    Collaborators

    • joshuaasare