Top 10 Amazing Chart Libraries in React

Rakesh Purohit
DhiWise
Published in
5 min readJul 7, 2022

Maximum efforts! (If you know the reference)

As a React developer, life is full of state management and renders. We spend a lot of time switching between the editor and the browser. Thanks to Dan Abromov for HMR.

Imagine that: we are about to complete the project, and the client comes up with a new thing, which is “Charts”.

Yes, I am OK with charts if it’s Microsoft Excel. Select your data and pick the chart you want: Pie Chart, Column Chart, and you are there. It’s that simple to present those data meaningfully. And now it comes to React implementing those data — mostly on the admin panel.

I was working on a similar feature, and I surfed the whole Google index to get the best for the requirement. And here I have the following libraries which might help you achieve what you want.

But before proceeding, what if I tell you that you can experience the same ease of use with DhiWise? You can use the “Change View” functionality and convert your Figma design into react chart components. Try this out at DhiWise.

Chart View in DhiWise
Converting a Chart View of Figma to React code

So here are those 10 libraries that I would recommend using in React :

  1. React-charts
  2. Recharts
  3. Visx
  4. Nivo
  5. React-vis
  6. Victory
  7. React-google-charts
  8. React-chartjs-2
  9. React-financial-charts
  10. Rumble-charts

1. React-charts

NPM | GitHub | v2.0.0

📥 : 14,989/Week | 🌟: 1.9k | 🍴: 169

Tanner Linsley, the creator of react-table, react-query, and many other useful, MIT-licensed libraries has handcrafted this library, which is hyper-responsive, invisibly powered by D3 and declarative, and has a flexible data model.

It supports Line Charts, Bar Charts, Column Charts, Bubble Charts, Area Charts, Axis Stacking, Inverted Axes, Multiple Axes, etc.

It is sponsored by GitHub, Retool, daily.dev, App smith, Buildable, AG Grid, neo4j, and the list goes on.

2. Recharts

NPM | GitHub | v2.1.10

📥 : 10,17,621/Week | 🌟: 18.3k | 🍴: 1.4k

MIT-licensed and built with React and D3.js; ReCharts is a component-based React chart library. It has various flavors in Line Chart, Area Chart, Bar Chart, Composed Chart, Scatter Chart, Pie Chart, Radar Chart, Radial Bar Chart, etc.

The best thing about this library is, it is just one import statement away. Provide the data and you get the result.

The library is simple to use, contains declarative components, and has native support for SVG (no extra config). It also has excellent documentation, is well maintained, has a large community, and can be used as a CDN or NPM package.

3. VISX

NPM | GitHub | v2.10.0

📥 : 10,224/Week | 🌟: 15.2k | 🍴: 586

This Airbnb-backed, MIT-licensed is just 12 kB in size, which is more of a visualization library and less of a chart library for React. It is unopinionated on purpose, which makes it more adaptive and usable for different cases.

The library provides beautiful visualization and is completely written in TypeScript which is amazing.

4. Nivo

NPM | GitHub | v0.79.1

📥 : 4,727/Week | 🌟: 10.1k | 🍴: 822

The library offers HTML, Canvas, and SVG maps, and provides support for customers. Highly customizable and powered by react-spring.

The official website has super interactive to peep into the code. It can render on the server side.

5. React-vis

NPM | GitHub | v1.11.7

📥 : 83,374/Week | 🌟: 8.2k | 🍴: 836

It is so simple that you don’t require any deep knowledge of data visualization libraries to start building your first visualizations, fully customizable and react-friendly.

This Uber based react library is “Industry strong” which makes it more reliable.

6. Victory

NPM | GitHub | v36.4.0

📥 : 1,70,343/Week | 🌟:9.6 k | 🍴: 492

Formidable developed this library which has composable react components. This library is flexible and robust. It supports animations, custom components, tooltips, events, and a lot more.

This library has an astounding website explaining all the supported charts like Stacked Polar bar, Stacked Histogram, Histogram with Slider, Stream Graph, Interpolation, and so many with live previews.

7. react-google-charts

NPM | GitHub | v4.0.0

📥 : 73,528/Week | 🌟:1.3 k | 🍴: 286

It is a thin, typed, React wrapper over Google Charts Visualization and Charts API. Furthermore, it has live examples which allows knowing all the supported charts by this library. Not only that, but it is an easy-to-use library, and you can play it the way you want.

8. React-chartjs-2

NPM | GitHub | v4.1.0

📥 : 6,06,370/Week | 🌟:5.1 k | 🍴: 1k

It contains react components for Chart.js, and supports Chart.js v2 & v3. It supports charts such as Bar, Line, Pie, Doughnut, Polar area, Radar, Scatter, and Bubble.

You can use this library in your React project when you have a basic need to implement the charts into the project you are working on.

9. React-Financial-Charts

NPM | GitHub | v1.3.2

📥 : 1,369/Week | 🌟:760 | 🍴: 119

If you are a FinTech, then this might be for you. It has over 60 technical indicators and overlays and supports Scatter, Area, Line, Candlestick, OHLC, HeikenAshi, Renko, Kagi, Point & Figure charts.

Interactive Indicators

  • Trend line
  • Fibonacci Retracements
  • Gann Fan
  • Channel
  • Linear regression channel

10. Rumble-charts

NPM | GitHub | v4.0.0

📥 : 334/Week | 🌟:327 | 🍴: 38

It contains react components for building composable charts. It allows writing flexible charts to visualize your data. This is based on D3.js.

All you have to do is, import the component and provide data and done! It’s that simple.

That’s it from my side. Thank you for coming here. [Oops, It is not a standup!]

At DhiWise, we just rolled out support for various Figma design components into chart component code with “Change View” functionality.

We support libraries such as Nivo, Victory, react-chartjs-2, react-google-charts, and recharts along with some default configurations and fake data.

Moreover, bar, line, scatter, area, radar, composed, tree map, doughnut, bubble, radial, funnel, Sankey, and candlestick are the types of charts you can change the view for.

We have a developer community thriving with knowledge and awesomeness! We had a webinar on TypeScript that you can watch here if you missed it:

I am a React Developer @ DhiWise.

Find me on GitHub | Twitter | LinkedIn

Me, when it comes to refactoring the code

--

--