react-native-highcharts-webview

Highcharts react native wrapper, fork from HighCharts.

Platforms

[x] iOS [x] Android [ ] Web

Prerequisites

• expo >=43.0.3, we are using the Asset and FileSystem packages
• react-native-webview

Installation

Install dependencies

yarn add react-native-highcharts-webview
yarn add expo

Extra steps for bare react native projects

1. follow the setup guide of Expo
2. Add permissions to Android manifest

<!-- Added permissions -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.INTERNET" />

Edit metro.config.js

const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');
const escape = require('escape-string-regexp');
const pak = require('../package.json');
const { getDefaultConfig } = require('metro-config'); // <-- add this

const root = path.resolve(__dirname, '..');

const modules = Object.keys({
  ...pak.peerDependencies,
});

module.exports = (async () => {
    //<------add this
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
   //</add this-------->

  return {
    projectRoot: __dirname,
    watchFolders: [root],
    resolver: {
      blacklistRE: blacklist(
        modules.map(
          (m) =>
            new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
        )
      ),
      sourceExts, ///<------add this
      extraNodeModules: modules.reduce((acc, name) => {
        acc[name] = path.join(__dirname, 'node_modules', name);
        return acc;
      }, {}),
      assetExts: [...assetExts, 'hcscript'], ///<------add this
    },
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
  };
})();

Try it

iOS

yarn example ios

Android

yarn example android

Example

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

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>
    );
  }
}

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.
webviewProps	Object	no	You can pass webview props.
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.

License

See the License file

Remarks

Changelog

0.1

• Init forking from official package
• modify folder structure and dependencies
• update highcharts files to version 9.3.1