score:12

Accepted answer

HighCharts works with the DOM. You cannot use HighCharts or charting libraries that depend on the DOM directly in React Native, but you can use charting libraries in a WebView with React Native. I have not use High Charts specifically, but have used other charting libraries with WebView and it works great.

score:0

Add this line to the ChartView component : originWhitelist={['']}

Example:

<ChartView style={{height:300}} config={conf} originWhitelist={['']}></ChartView>

score:1

You can use this module: react-native-highcharts.

It works using the web engine on Android or iOS and the Highcharts JavaScript module to render dynamic charts.

Example:

<ChartView style={{height:300}} config={conf}></ChartView>

score:2

Here you can use this component to send the config json to the componente and it will be displayed

https://github.com/TradingPal/react-native-highcharts

score:2

Two main ways you can utilise Highcharts in React Native app are :

  1. WebView component. I used this technique on other platforms (Appcelerator Titanium) as well.
  2. Official minimal Highcharts wrapper for React : highcharts-react-native.
    As of now pre-requisite for this are:
    • node 11.2+
    • npm 6.7.0+ or similar package manager
    • React 16.4+
    • React native 0.59.3+

To install:

npm install @highcharts/highcharts-react-native

NOTE: There are other un-official wrappers as well like react-native-highcharts but I have not used them.


Related Query

More Query from same tag