Top 5 React Chart Libraries for 2020
Tags: react, reactnative, javascript, webdev
Published: 2019-10-23 13:43:15

###Useful open-source data visualization libraries for your React application.


Charts are like wheelchairs for our feeble minds. If you want to make a data-informed decision, you better get the right help 🙂

> # “There is magic in graphs. The profile of a curve reveals in a flash a whole situation — the life history of an epidemic, a panic, or an era of prosperity. The curve informs the mind, awakens the imagination, convinces.
> # […] Words have wings, but graphs interpret. Graphs are pure quantity, stripped of verbal sham, reduced to dimension, vivid, unescapable.” 

— Willard C. Brinton, 1939

Using the right type of chart is one decision to make when presenting data but as React developers, we have our own set of concerns, mainly, choosing the right chart component library.

So, what are my criteria for a good chart library?

1. It should be highly customizable

1. It should have an easy API and a clear and comprehensible documentation

1. It should present a good UI/UX

1. It should be widely adopted and tested (why be the guinea pig?)

One important tip to keep in mind — components are all about reusability and standardization — that’s a good way to guarantee a consistent UI and easy maintenance. Use platforms like [Bit](https://bit.dev) to share your [components](https://blog.bitsrc.io/independent-components-the-webs-new-building-blocks-59c893ef0f65), reuse them across apps, and let everyone collaborate together to build your products with [atomic components](https://blog.bitsrc.io/independent-components-the-webs-new-building-blocks-59c893ef0f65). To avoid repeated copy-pasting, try making your own customized React chart library with [Bit](https://bit.dev) for your future-self and others 😉

<a href="https://www.bit.dev"><img src="https://cdn-images-1.medium.com/max/2744/1*UOCNbzlanj4bONGZ_MxVcg.gif" alt="Example: Rechart’s component collection in Bit’s component hub"></a>


So, without further ado, here is my list of top 5 React chart libraries:

## 1. Rechart

Rechart (built with [D3.js](https://d3js.org/)) is all about modularity and simplicity. The grid, the tooltip, the line items, etc. are all reusable React components; that makes it much easier to customize charts and even reuse your own customized “sub-chart” components in other chart-compositions.

<img src="https://miro.medium.com/max/2956/1*TRXKaUaRfTY70mWDEMW8wQ.gif">

{% github https://github.com/recharts/recharts %}


## 2. Victory

By offering a highly opinionated component ecosystem with fully overridable styling and behavior, Victory keeps the right balance between ease-of-use and high customizability.

Victory is also a good choice for those of us who are looking for a cross-platform solution. It has an almost identical API for both ReactJS and React Native — an important thing to keep in mind.

![Example: A transition animation in a Victory chart component](https://cdn-images-1.medium.com/max/2000/1*CI5wo14lLB7cveAZd3-CXA.gif)

{% github https://github.com/FormidableLabs/victory %}

## 3. Nivo

Nivo (also, built with D3js) wins two awards: The first is for its beautiful UI and the second is for the incredible “interactive documentation”. Instead of reading long docs, Nivo offers an amazing UI for playing and tweaking with your chart components. Then, whenever you’re ready, simply copy-paste your tweaked chart’s code (and of course, with time, tweaking the code directly would be the preferable way but the journey to mastering Nivo’s API would be brief and painless)

![Example: Tweaking a bubble component on Nivo’s playground](https://cdn-images-1.medium.com/max/2708/1*NRsC-cZ-SzjcAm2hW5Fwbg.gif)

{% github https://github.com/plouc/nivo %}

## 4. Vis

Vis, a library built by Uber, is similar to Recharts in its efforts to keep its component ecosystem as simple and modular as possible. The idea here is — if you know React you know Vis and that’s mostly true.

When it comes to aesthetics, Vis is pretty straightforward and simple looking.

![](https://cdn-images-1.medium.com/max/2082/1*7-84nBxGSJNj4Im0ogjkAA.gif)

{% github https://github.com/uber/react-vis %}

## 5. VX

VX is for those who have a very specific idea of how their charts should look and behave but are not yet ready to build their own D3 based component ecosystem. VX is unopinionated and designed to be built on top of. Plus, with VX, keeping your bundle size small is a much easier task than with comparable libraries.

![](https://cdn-images-1.medium.com/max/2000/1*WjH_2YPCrfFwt3ovNTwkWA.gif)

{% github https://github.com/hshoff/vx %}


## Conclusion

That’s my personal list of React data visualization libraries. Hopefully, you’ll find here something the works for you, whether you put more emphasis on aesthetics, ease of use or even the additional KBs added to your bundle size.

Cheers 🍺


## Related posts

{% medium https://medium.com/bitsrc/building-a-react-design-system-for-adoption-and-scale-1d34538619d1 %}