Best React Chart Libraries

by Mauro Bianchi and Eleonora Genna - 15/04/2022

Chart libraries allow you to simplify the process of creating graphs and other data visualization within web projects.
Here we present and analyze the libraries that can be used directly within projects based on React, the technology that INMAGIK uses for the development of applications and data visualizations on the web.
The open source libraries selected are those that best meet our criteria of efficiency, variety and updating.

1. Recharts

Built with D3 and React, Recharts is one of the most popular libraries. It quickly creates visualizations with decoupled and reusable React components. It supports SVG natively and allows you to customize graphics by introducing custom components. This library is ideal for projects where sophisticated customization is not required.

2. Visx

Airbnb unified the company's visualization stack by creating Visx, a project that combines D3 and React. With this project you can create a library of graphics optimized for specific uses. The reduced size of the packages and the adhesion to any theme or style are some of the numerous advantages of this library.

3. Nivo

Based on D3, Nivo’s React components create simple and customizable data visualizations. This is one of the few libraries that provides server-side rendering and fully declarative graphics capabilities. It gives the possibility of using, for some graphics, a rendering mode based on html and canvas, and not just based on svg. Nivo also supports motion and transitions thanks to React Motion. Lastly, It has a very defined basic style and a large variety of original charts, funnel, bullet, choropleth map and voronoi. From maps to networks, Nivo touches all aspects of data visualization.

4. Victory

A collection of modular graphics components for React and React Native. Victory allows you to create graphs with customizable styles and behaviors. Using the same APIs for the web and React Native applications you can easily create cross-platform graphics.

5. React-Vis

React and user friendly, React-Vis is a library created to support Uber's many internal tools and then evolved into an instrument which can create complex and customizable charts. It offers a wide choice, from area charts to tree maps. Animations are supported by React Motion.

Wrapper Libraries

6. React Google Charts

The React Google Charts library for charts based on the Google data visualization API. Among the graphs proposed we find the tables, absent in the other libraries.

7. React Plotly

React-Plotly provides the necessary components to simplify the use of the popular plotly.js javascript library within React projects. The categorization of the graphs is based on specific sectors: statistics, finance, science, 3D, maps. It has a dual license, free for the open source version and paid with additional services and support.

8. React-Chartist

Simple and responsive chart library. React-Chartist provides a component to simplify the use of the popular chartist.js javascript library within React projects. It has a limited number of charts but with very specialized variations of line chart, pie chart and bar chart.