The top 5 ReactJs chart libraries, video review.
Tags: react, webdev, reactnative, javascript
Published: 2021-02-12 15:17:49

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. 
{% link https://dev.to/keefdrive/the-top-four-react-chart-libraries-that-you-need-to-know-for-2021-2nl8 %}

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 :

{% youtube wA_rMg8jqfs %}


###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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2vieh00mnqeipcw0ol2v.gif)






## 📊 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/paq9s3qp171zheso4ksl.gif)


## 📊 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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lmt17vqmvsz86hu72p4x.gif)


## 📊 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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pblpl2nfeexhe6bob7tu.gif)

## 📊 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