Official minimal Highcharts wrapper for React Native.
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+
Get package from NPM in your React app:
npm install @highcharts/highcharts-react-nativeImport into your React Native project and render a 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'
}
});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'
}
});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'
}
});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'
}
});Expo tools allows you to build, deploy, and quickly iterate on native iOS and Android apps from the same JavaScript codebase.
- Official website: expo.io
- React native getting started: facebook.github.io/react-native/
Available options:
<HighchartsReact
styles={styles}
webviewStyles={webviewStyles}
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)}
loader={ true }
devPort={'xxx.xxx.xxx.xxx:xxxxx'} // i.e 192.168.0.1:12345
/>You can style your container using JavaScript like in the regular react and react native.
Highcharts chart configuration object. Please refer to the Highcharts API documentation. This option is required.
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.
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.
Set the flag as true, if you would like to load files (i.e highcharts.js) from CDN instead of local file system.
Set the flag as true, if you would like to load files (i.e highcharts.js) by SSL. (The useCDN flag is mandatory).
Data to be stored as global variable in Webview.
Global communication between Webview and App.
Set the flag as true, if you would like to show loader while chart is loading.
You can style your webview using JavaScript like in the regular react and react native.
Highcharts chart configuration object. Please refer to the Highcharts API documentation. This option is optional.
const setOptions={
// Language object. The language object is global and it can't be set on each chart initialization. Instead, use Highcharts.setOptions to set it before any chart is initialized.
lang: {
months: [
'Janvier', 'Février', 'Mars', 'Avril',
'Mai', 'Juin', 'Juillet', 'Août',
'Septembre', 'Octobre', 'Novembre', 'Décembre'
],
weekdays: [
'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
'Jeudi', 'Vendredi', 'Samedi'
]
}
}When you use EXPO in DEV mode, you may to declare address and port to actually load the html file in Android. You cannot use build-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.
Clone github repository and install dependencies:
git clone https://github.com/highcharts/highcharts-react-native
cd highcharts-react-native
npm installTechnical 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.
-
Put the files (i.e. Folder: highcharts-layout and highcharts-files) to
android/app/src/main/assetsand/ios -
Use release mode instead of debug mode run
react-native run-android --variant=release
In the package.json remove the "main": "node_modules/expo/AppEntry.js" line.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent