Aman Mittal 👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 1M+ views on Medium | My weekly dev newsletter 👉 tinyletter.com/amanhimself

The top 8 React Native chart libraries for 2021

5 min read 1431

React Native Chart Libraries Symbol

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

A View of the React Native Charts Library

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

A Line Graph from 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

Mobile View of React Native Chart Kit

We made a custom demo for .
No really. Click here to check it out.

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.

Responsive React Native Chart Kit

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

A 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

A 4-Pane 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

A React Native Responsive Line Chart

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.

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

React Native Echarts Wrapper Shown on Mobile Device

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

A Victory Native Bar Chart in Motion

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.

A Black-and-White Victory chart

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.

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Full visibility into your web apps

    LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

    In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

    .
    Aman Mittal 👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 1M+ views on Medium | My weekly dev newsletter 👉 tinyletter.com/amanhimself

    Leave a Reply