Mobile data visualization in React Native: top libraries
We can speak at length about the importance of presenting data not only in a dry, text format but also in visuals. However, this article has a more pragmatic purpose. I decided to gather and consolidate in one place the brief yet useful information for developers who want to solve the task of data visualization in a mobile application. More specifically, to present a list of data visualization libraries for React Native developers. I’ve tested each library and checked them for compliance with the following criteria:
- responsiveness
- easiness of integration
- interactivity
- modern design
I do hope this guide won’t leave you indifferent and will bring value to your project, whether it’s web-, Android-, or iOS-based.
Charts
Victory
Victory is a React.js library for modular charting and data visualization. It’s also called the ecosystem of React components for data visualization.
Each chart component maintains plenty of properties, which contribute to customization capabilities. You can control pretty much everything: from the look to the functionality. Or even build your custom component.
If you admire beautiful design as much as I do, take some time running the samples and image greatly they can look in your own app. You can apply material and grayscale design themes, or customize the chart by overriding its style.
Ready to play with charts?
Dive into the guide on how to integrate Victory with React Native and get started.
Demos
Let me show at once more sophisticated charts which Victory is famous for. These are really worth taking a look at:
Recharts
Recharts is a library that provides a set of reusable React components. Despite being modest in appearance, it reveals a lot of scenarios to achieve. The library natively supports SVG and contains a lightweight dependency tree.
Among the demos, I’m sure you’ll find the ones that are best for your business case.
Otherwise, you can take a basic chart and customize it according to your specific goals.
To get started with Recharts, use a wrapper for React Native.
Demos
Plunge into the gallery to take a look at the variety of options the library has to offer. Here’s a small portion of them:
react-native-svg-charts
This UI library was started as a side-project, but now it’s one of the most popular open-source libraries for empowering React Native apps with charts.
Charts are quite simple, yet, they can be prettified according to your logic. Traditionally, you can customize them through multiple properties.
The library works with pure JS, iOS, and Android. But note that it currently requires new contributors and maintainers. Maybe you can be the one.
Demos
Pivot Table and Data Grid
Flexmonster Pivot Table & Charts
Flexmonster is a front-end pivot table component, designed to assist in data processing and report building with the help of aggregating, filtering, and sorting. The tool allows rearranging fields in a drag-and-drop manner, making the whole reporting experience flexible and fast. Resulting reports can be saved in JSON and restored later or exported to PDF, Excel, CSV, and other formats.
Your data may come from multiple sources: CSV and JSON files, SQL/NoSQL databases (MongoDB, in particular), Elasticsearch, data warehouses. Speaking of OLAP cubes, you can also work with SSAS and Mondrian.
The component has three primary ways to be used:
- As a pivot table
- As a data grid
- As pivot charts
Pivot charts differ from regular charts in a way that they visualize aggregated data taken from the pivot table, instead of the raw one. One of the possible scenarios is to split your working area into two parts: one with the grid, the other with the charts. Thus, you’ll see the same data but in various forms. You can also combine multiple components on a single dashboard that highlights important business metrics.
Demos
There’s a ton of examples on the website. I encourage you to play around with them and explore all basic features: aggregations, filtering, layouts, themes, integrations with third-party charts.
DevExtreme React Grid
React Grid by DevExtreme is a native React component for displaying data on the grid. It comes with out-of-the-box filtering, sorting, editing, grouping, and searching functionality. The thing I like is that you can set multiple filters simultaneously; besides, they work both for text and numerical fields.
Under the hood, the component is build using a functional approach.
More features I’d like to highlight include virtual scrolling, which allows working with up to 200k rows. Note that a VirtualTable plugin needs to be enabled. Plus, if you need to load your data partially, a lazy loading feature may come in handy.
Also, the grid connects to remote data sources, works with the Redux store, which allows observing how Grid states are changing, ships with TypeScripts definitions and localization API, and more.
If you’re a fan of customization, you can extend the grid’s functionality by developing a custom plugin. Or simply change themes: from Material-UI Light/Dark to all versions of Bootstrap themes. The dark theme looks especially stylish.
Demos
Final thoughts
All these UI libraries make data visualization effective on both mobile and web. I do hope that you’ll use the one that fits your enterprise analytics best. Or even a combination of them.
