@highcharts/highcharts-react-native
Highcharts react native wrapper
$ 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
  3. Get repository
  4. FAQ
    1. Where to look for help?
    2. Files are not loaded
    3. Error loading page

Getting Started

General prerequisites

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

  • node 11.2+
  • npm 6.7.0+ or similar package manager
  • React 16.4+
  • React native 0.59.3+

Installing

Get package from NPM in your React app:

npm install @highcharts/highcharts-react-native

Using

Basic usage example

Import into your React Native project and render a 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 = [
    'highcharts-more',
    '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 options:

  <HighchartsReact
    styles={styles}
    options={this.state.chartOptions}
    modules={modules}
    callback={chartCallback}
    useSSL={true}
    useCDN={true}
    data = {'Data to be stored as global variable in Webview'}
    onMessage = ((message)=> this.onMessage(message))
  />

styles

You can style your container using JavaScript like in the regular react and react native.

options

Highcharts chart configuration object. Please refer to the Highcharts API documentation. This option is required.

modules

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 = [
    'highcharts-more',
    'solid-gauge'
];

and set the parameter.

callback

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

Set the flag as true, if you would like to load files (i.e highcharts.js) from CDN instead of local file system.

useSSL

Set the flag as true, if you would like to load files (i.e highcharts.js) by SSL. (The useCDN flag is mandatory).

data

Data to be stored as global variable in Webview.

onMessage

Global communication between Webview and App.

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.

Current Tags

  • 2.0.3                                ...           latest (6 days ago)

8 Versions

  • 2.0.3                                ...           6 days ago
  • 2.0.2                                ...           21 days ago
  • 2.0.0                                ...           21 days ago
  • 1.0.0                                ...           7 months ago
  • 0.0.5                                ...           7 months ago
  • 0.0.3                                ...           7 months ago
  • 0.0.2                                ...           7 months ago
  • 0.0.1                                ...           7 months ago
Downloads
Today 0
This Week 0
This Month 17
Last Day 0
Last Week 10
Last Month 47
Dependencies (0)
None
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |