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.


add this line to the chartview component : originwhitelist={['']}


<chartview style={{height:300}} config={conf} originwhitelist={['']}></chartview>


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.


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


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


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