Can we use Highcharts with React-Native?

Question

I am currently using Highcharts for my web application, but now I am creating an Android application using action-native. Will Highcharts work with React-native.

Answer 1

HighCharts works with the DOM. You cannot use HighCharts or DOM-dependent graphics libraries directly in React Native, but you can use graphics libraries in WebView using React Native. I did not use High Charts specifically, but I used other graphic libraries with WebView, and it works fine.

Answer 2

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

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

Answer 3

Two main ways to use Highcharts in a React Native application:

1. WebView component. I used this technique on other platforms (Appcelerator Titanium).
2. The official Highcharts minimum shell for React: highcharts-responsive-native .
   Currently, a prerequisite for this is:
   • knot 11. 2+
   • npm 6.7. 0+ or ​​similar package manager
   • React 16. 4+
   • Respond to native 0.59. 3+

For installation:

npm install @highcharts/highcharts-react-native 

NOTE. There are other unofficial shells , such as response-native-highcharts , but I did not use them.

Answer 4

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

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

Example:

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

Answer 5

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

Example:

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