How to implement interactive bar chart in React native?

user_2499893 0
Viewed 1340

I am working on React Native App project where I have to display an interactive bar chart. As shown in attracted screenshot. The app is working on both iOS and Android devices. Where we are currently providing minimal iOS and Android app support as following:

1. Android 4.3.x / Jelly Bean / API level 18 
2. iOS 9.0 or later
3. iPadOS 9.0 or later.

Requirement:

  1. In a bar chart, every bar will be clickable. When the user clicks on any bar, the relative information will be display below the chart accordingly.
  2. Suggested chart library should match our minimal app support in both operating systems (iOS & Android).

Current dependencies

Currently, the project is running with the following React framework versions:

  1. React Native: 0.63.4
  2. React: 16.13.1

enter image description here

react-native bar-chart android javascript ios
1 Answers

After doing lots of research I found following chart libraries:

1. react-native-chart-kit

2. React Native Charts Wrapper react-native-charts-wrapper

  • Weekly Downloads:2,804
  • It is built on MPAndroidChart(v3.1.0) & Charts(v3.3.0), support both android & iOS. These libraries are very popular Native charting library. This library is also having good support and documentation.
  • People suggesting to use it. react native chart/graph library that supports user onPress?

3. React Native Pure Chart react-native-pure-chart

4. react-chartjs-2

5. Victory

Article on Quora: See the link where user article shows good react-native charting tools https://www.quora.com/Which-is-the-best-react-native-charting-tool

Final Conclusion

I have found React Native Charts Wrapper is suitable for me, even I have tested in Android 5.1 and iOS 9, in both device bar chart is working fine and didn't fine any crash or bug. The library is also working fine with latest devices. Also tested with React-Native 0.64 and it is working fine at my end.

user_24998930
Related