@highcharts/highcharts-react-native
Official minimal [Highcharts](https://www.highcharts.com/) wrapper for React.
$ cnpm install @highcharts/highcharts-react-native 
SYNC missed versions from official npm registry.

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
    4. How to run
  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.59.3+
  • react-native-webview 9.4.0+
  • metro-config 0.60.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.

Installing

Get package from NPM in your React app:

npm install @highcharts/highcharts-react-native

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']
      }
    }
})()

Note: The metro-config package have to be installed in order to use this wrapper.

Using

Basic usage example

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

Highcharts chart

import React from 'react';
import {
    StyleSheet,
    WebView,
    Text,
    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: {
                series: [{
                    data: [1, 2, 3]
                }]
            }
        };
    }

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

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

Highcharts live data update

import React from 'react';
import {
    StyleSheet,
    WebView,
    Text,
    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: {
            	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>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                />
            </View>
        );
    }
}

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

Highcharts advanced series

import React from 'react';
import {
    StyleSheet,
    WebView,
    Text,
    View,
    Button
} 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>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                    modules={modules}
                />
            </View>
        );
    }
}

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

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,
    WebView,
    Text,
    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>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                />
                <Button
                    onPress={this.chartUpdate.bind(this)}
                    style={styles.button}
                    title='Chart update'
                    color='#000'
                />
            </View>
        );
    }
}

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

How to run

Expo tools allows you to build, deploy, and quickly iterate on native iOS and Android apps from the same JavaScript codebase.

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

Current Tags

  • 3.0.1                                ...           latest (5 hours ago)

16 Versions

  • 3.0.1                                ...           5 hours ago
  • 3.0.0                                ...           a day ago
  • 2.2.3                                ...           14 days ago
  • 2.2.2                                ...           a month ago
  • 2.2.1                                ...           3 months ago
  • 2.2.0                                ...           3 months ago
  • 2.1.2                                ...           6 months ago
  • 2.1.1                                ...           7 months ago
  • 2.0.3                                ...           8 months ago
  • 2.0.2                                ...           8 months ago
  • 2.0.0                                ...           8 months ago
  • 1.0.0                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Downloads
Today 0
This Week 45
This Month 45
Last Day 24
Last Week 24
Last Month 64
Dependencies (0)
None
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |