I’ve been working on a use case recently which requires showing various charts types with heavy data. At the same time, we don’t want to compromise on app screen load time and chart responsiveness. We explored native chart libraries as well and other react-native chart libraries / SVG renderers.
Why RN HighCharts library is the winner
- Native Charting libraries follows different data contract for IOS and Android to render the charts. We will have to introduce a middleware to process and prepare the data contract based on the runtime os if your app needs to support both ios and android. This might look reasonable at beginning but as the application grows, this will become a maintenance overhead. Example: Suppose if the MPAndroidChart chart has any enhancements in the data contract in their major release, you end up re-coding your middleware to support the breaking changes.
- High-charts offers native SDK for Android and IOS. But, to make them work with React Native code, you need to build a native bridge to establish the communication between the native SDK and your react native app. Hypothetically, even if we are able to build it backed by unit test cases, the bridge implementation has to undergo stringent testing for memory leaks and benchmarking its performance. For any troubleshooting needs, teams need to adopt native android and ios expertise, swift/java/Kotlin skills and best practices.
- RN Highchart has good performance and supports wide variety of charts along with chart drill down, export module, animations, smooth zoom capabilities etc
Creating charts with Highcharts in react native
Visit the homepage to know more about Highcharts https://www.highcharts.com/
Follow these instructions for setting up the library Getting Started and Installation
In this example, we will be loading the data from the static json files, alternatively data can be loaded from the backend API.
For rendering charts other than basic ones, we need to load add-on features as modules. Eg. modules “sankey” ,”organization” both are required for rendering the organisation charts.
const modules = [“highcharts-3d”,”heatmap”, “tilemap”, “funnel”, “sankey” ,”organization”, ‘timeline’];Few more lines of code,
<HighchartsReactNative
styles={styles.container}
modules={modules}
options={this.state.chartOptions}
/>And Voila! your app now supports amazing charts for both android and ios
Although Highsoft put a deprecation disclaimer that the following repository will not be actively maintained, we haven’t faced any issues so far with respect to implementation or functionality.
Bonus section
While evaluating Highcharts, I have also spent some time evaluating other charting libraries. Hope the following comparison helps you.
