Charts and graphs come in handy when you want to display statistical data retrieved from the database in a meaningful way. Knowing what data visualization library is optimal for the mobile app you are working on is the first step in this process.
Cross-platform mobile app framework React Native has a ton of open source libraries that help to represent data in charts and graphs. In this post, let’s go through a variety of these libraries to conclude what may suit a particular set of requirements.
react-native-charts-wrapper
This open-source library supports both iOS and Android devices. It is based on native charting libraries such as MPAndroidChart and iOS charts and on the Android platform, it has support for most configurations available in the MPAndroidChart library. It also has a different number of supported chart types including line, scatter, bubble, pie, radar, bar, combined, and candlestick.
As a library, it is well documented and goes on to explain how to get integrated into a new React Native app with a step by step tutorial and points the major conventional differences between iOS and Android. For example, the color’s alpha on Android is between the range of 0-255, and on iOS is 0-1. This kind of information is really helpful for someone who is getting started with a chart library in their mobile app for the first time. The library is actively maintained on GitHub.
react-native-svg
This library provides SVG chart support for React Native apps on both iOS and Android devices and a compatibility layer for the web. It uses react-native-svg package as a dependency to render graphs and charts. It utilizes d3 library to create SVG paths and to calculate coordinates.
What started as a side project, now supports a variety of chart patterns as ready-to-use components. Here is the list of patterns available with this library:
- Area
- StackedAreaChart
- Bar
- StackedBarChart
- Line
- Pie
- Progress circle
- YAxis
- XAxis
Since all of these components come with the library itself, it also provides a common set of props for each of the components to customize the chart to represent the data in its accurate form. This set of common props also makes it easier to use in a real-world scenario.
react-native-chart-kit
A charting library that supports both Expo apps and React Native vanilla apps, is something worth giving serious consideration. It is built on top of famous open source projects such as react-native-svg, paths-js, and react-native-calendar-heatmap. It supports patterns such as line, bezier line, pie, progress ring, stacked bar, and contribution graph (also known as a heat map). Some of the patterns this library supports are unique as compared to other libraries mentioned in this article. Each of the patterns has its own set of props which makes it easier to customize data on a mobile app screen.
Apart from some unique patterns, this library also allows you to render a responsive chart by using Dimensions API from React Native by calculating the width of the device’s screen. Each chart component also accepts a style prop that can be applied to the parent SVG or View component to customize the default styles of that chart pattern.
react-native-pie-chart
An open-source library that is simple to use and offers two different variants to display data in form of a pie is made available through react-native-pie-chart. It is useful for scenarios where as the app developer you have a requirement to represent the data in the form of a pie but want to keep the bundle size of your app small. A library, as discussed in this article, offers a variety of components and patterns that are definitely going to increase the overall bundle size of the app.
This library offers a set of props to apply custom styles or switches between the two shapes it offers. This makes it easy to configure and understand.
CLCchart
Constantly changing data that has to be accurate for the end-user to analyze is no doubt one of the most complex data to portray on a mobile app screen, take stock market data for example. CLCchart is a cross-platform UI charting library that specializes in representing stock data in the form of charts using the canvas. It supports both web and cross-platform mobile app frameworks such as React Native. It is easy to install and integrate with the React Native app as well with just one line of execution from the terminal window.
This library depends on a cross-platform rendering engine called GCanvas. This engine is developed by a team of developers at Alibaba for mobile devices and is based on OpenGL. To use it in React Native apps, you will have to follow a set of instructions to install it and integrate it on both iOS and Android platforms.
react-native-responsive-linechart
Like react-native-pie-chart, this library is particular in representing data in form of lines on a mobile screen. Written completely in TypeScript, this library has a composable API for different types of representation of the line chart. It supports adding tooltips and a large number of data points.
Learn more →It depends on only two external libraries, react-native-svg and react-native-gesture-handler. By enabling the latter dependency, it allows this library to support scrollable charts by setting a viewport prop. Lastly, since it does not depend heavily on other libraries and supports only one type of charting pattern, this library has a total package size of only 62 kilobytes (unzipped).
react-native-echarts-wrapper
It is a charting framework that wraps around popular echarts. It runs on webview and explicitly depends on react-native-webview. With this library, it is possible to create and represent a complex set of data with interactivity for each data representation on the app screen.
Since it uses webview, it has support for both vanilla React Native apps as well as Expo apps. It is not easy to make two-way data communication between the chart that is running on the JavaScript thread in the webview and the React Native JavaScript thread. So this library leverages the webview method called sendData to communicate with the React Native JavaScript thread. Do note that using this method, the data in string format can only be sent.
victory-native
Built and maintained by a team of developers at Formidable labs, victory-native is a charting library that supports different patterns in modular forms and ready to use components for both React and React Native applications. The React Native variant is also known as Victory Native. All of the components provided by this library can be used to visualize data in various formats and support complete customization in terms of styles and behavior. It is easy to install and integrate this charting library in a React Native app. The only peer dependency it has is react-native-svg that also requires to be installed explicitly.
Apart from a different set of chart components this library supports, there are many perks it comes with. First and foremost is the support of animations and transitions. With the help of an animate prop, the animation changes can be applied to a VictoryChart component. The animation is possible using d3-interpolate which is a collection of interpolation methods. The default transitions on a VictoryChart component are customized using props such as onEnter and onExit.
The next advantage this library has over others mentioned in this article is the support for material and grayscale design themes. A set of colors can be defined in the form of an array, the typography to represent the data such as the font family, font size, and letter spacing. To label specific data set or a representation of data in a chart, VictoryTooltip is also available to add tooltips to charts.
There are so many configuration options and information on creating your own custom chart components available with this library that is hard to cover it all.
Conclusion
The open-source libraries included in the list are either based on personal experience or those which are actively maintained. The motive of these UI component libraries is to let you represent statistical data in its accurate form and help with the app development process. Some of the components and animations offered by these libraries are hard to reinvent considering the cost of development of the mobile application.
If you are familiar with any other charting library in the React Native ecosystem that is not mentioned in this post, leave its link in the comment section below and tell us why you like it.
LogRocket: Instantly recreate issues in your React Native apps.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
