Top 5 React Chart Libraries for 2020

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

Photo by Lukas from Pexels

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
2. It should have an easy API and a clear and comprehensible documentation
3. It should present a good UI/UX
4. 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 to share your components, reuse them across apps, and let everyone collaborate together to build your products with atomic components. To avoid repeated copy-pasting, try making your own customized React chart library with Bit for your future-self and others :wink:

Example: Rechart’s component collection in Bit’s component hub

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

1. Rechart

Rechart (built with D3.js ) 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.