Further to my one of my previous posts titled "The top four React chart libraries that you need to know for 2021", I have created a video review of the chart libraries plus a an extra chart library called "react-chartjs-2". This is basically the react version of the popular javascript library chart.js.

The top four React chart libraries that you need to know for 2021

Keerthi ・ Jan 8 '21

#react #webdev #reactnative #javascript

In the video I go through some sample codes, how to install and use and cover the range of charts each library is capable of producing.You can see the whole video here :

To recap I have listed the reviews of the 5 chart libraries in the below section

📊 1.Recharts

Recharts is an easy to use component based chart library that works nicely with React. The good thing about recharts is that it provides very nice looking charts out the box. The bad point is that its difficult to customize if you don't like the chart designs it provides. This is one of the first goto chart libraries that most developers turn to first, and is been popular for many years, so has a large community and is well maintained.

Github Stars: 15.5k
Dev Community: large community size and a very good number of developers contributing to the continual development
Built With: ReactJS and D3.js
Drawing support: SVG Only
Mobile Support: No version specifically for React Native
Client Side/ Server side: Client side
Animation: Very basic animation, NO custom animation support
Responsive: Not by default, need to add wrapper component
Customisation flexibility: There are quite a few little things that are difficult to customize like rendering order and animation.
Example with live code: Good documentation and live code examples at https://recharts.org/en-US/examples

Recharts Demo with code: Area chart with cool gradients and animated tooltips https://codesandbox.io/s/bar-chart-recharts-cqsbn

📊 2.Victory

Victory charts provide average looking charts out the box, but it gives you the option to fine tune the designs the way you want it. It also provides some flexibility on the animation front. Its selling point is that it's designer friendly and supports Android and IOS through a React Native version that uses the same API

Github Stars: 7k
Dev Community: Its maintained by team of designers and developers from a respected software development company, Formidable.
Built With: React and D3.js
Drawing support: SVG
Mobile Support: Has a React Native version so can develop for ios and Android
Client Side/ Server side: Client side
Animation: fairly good animation support without external animation Libraries.
Responsive: Provides responsive feature by default for SVG charts
Customisation flexibility: Provides adequate customization through its properties, very designer friendly library. But there is a little bit of a learning curve on using it.
Examples with live code: Good interactive documentation with editable code at https://formidable.com/open-source/victory/docs

Victory Demo with code: Animated pie chart https://codesandbox.io/s/victory-pie-chart-bcmx6

📊 3.VISX (VX)

VISX (VX) uses D3 to perform mathematical computations while you use React to update the DOM. It comprises of small primitive visualization components that can be used to construct complex visualizations like chord, dendrograms, treemap, and Voronoi diagram. It evolved from projects carried out at Airbnb

From Airbnb developer site :
"At Airbnb, we made it a goal to unify our visualization stack across the company, and in the process, we created a new project that brings together the power of D3 with the joy of React."
Advantages are: Keep bundle sizes down, Un-opinionated on purpose, and Not a charting library

Github Stars: 12k stars on Github
Dev Community: Originally developed by Airbnb, Fairly Large community, well maintained
Built With: React and D3.js
Drawing support: SVG
Mobile Support: No support for Mobile
Client Side/ Server side: Client side
Animation: Can support animation with react-spring
Responsive: Not by default, need to add wrapper component
Customisation flexibility: The Use small d3 based primitive visualization components allows you the freedom to build complex visualizations.
Examples with live code: Quite hard to navigate the documentation, Doesn't explain things very well, but do provide examples with code at https://vx-demo.now.sh/gallery

VX Demo with code: Advanced animated Pie chart with inner and outer segments https://vx-demo.now.sh/pies

📊 4.nivo

Nivo s the only Charting library on this list that provides us the ability to generate charts on the server-side as well.

Nivo is capable of generating responsive charts using pure HTML, SVG, and canvas. Canvas charts are faster than SVG for extremely large datasets. HTML charts are ideal for email. So Nivo is a very complete library, unlike the rest in the list. Its also designer friendly.

Github Stars: 8.1k stars on Github
Dev Community: Fairly good community and well maintained
Built With: React and D3.js
Drawing support: SVG,Canvas,HTML
Mobile Support: No support for Mobile
Client Side/ Server side: Both
Animation: Supports animation.
Responsive: Provides responsive feature by default for most charts
Customization flexibility: Fairly good customization, can build a chart using their interactive playground or Storybook.
Examples with live code: Very good interactive documentation and live code on storybook at https://nivo.rocks/storybook/?path=/story/bar--stacked

Nivo Demo with code: Race chart https://codesandbox.io/s/race-chart-lz5s3

📊 5.REACT-CHARTJS-2

REACT-CHARTJS-2 Is the ReactJS version of Chart.js. It has very good out the box features. The vanilla javascript version has been a very popular javascript chart library for many years, but it has no specific documentation on the usage with React framework. It produces canvas based charts, so that means it good on performance when dealing with large data sets.

Github Stars: 3.7k stars on Github
Dev Community: Fairly maintained, considering that it is a wrapper for chart.js
Built With: Vanilla javascript
Drawing support: Canvas
Mobile Support: No support for Mobile
Client Side/ Server side: Client side
Animation: Can support animation
Responsive: Responsive out the box
Customisation flexibility: Fairly customizable with extra plugins
Examples with live code: There's no specific documentation for react.js, but refer to github page https://github.com/reactchartjs/react-chartjs-2