✨Top React Charts Libraries [2021]
Tags: react, charts
Published: 2021-09-27 08:36:59

## [Recharts](https://recharts.org/en-US "Recharts")
Recharts is a **Redefined** chart library built with [React](<https://facebook.github.io/react/>) and [D3](<http://d3js.org>).

The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:

1. **Simply** deploy with React components.
2. **Native** SVG support, lightweight depending only on some D3 submodules.
3. **Declarative** components, components of charts are purely presentational.

All the components of Recharts are clearly separated. The lineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.

## [visx](https://airbnb.io/visx "visx")

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.
[![](<https://github.com/airbnb/visx/raw/master/assets/visx-gallery.png>)](<https://airbnb.io/visx/gallery>)

For more examples using `visx`, check out the [gallery](<https://airbnb.io/visx/gallery>).

##[nivo](https://nivo.rocks/ "nivo")
**nivo** provides supercharged React components to easily build dataviz apps, it's built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.



### Installation

In order to use nivo, you have to install the `@nivo/core` package and then choose some of the scoped `@nivo` packages according to the charts you wish to use:

```
yarn add @nivo/core @nivo/bar
```



### Features

- Highly customizable
- Motion/transitions, powered by [react-motion](<https://github.com/chenglou/react-motion>)
- [Component playground](<http://nivo.rocks>)
- [Exhaustive documentation](<http://nivo.rocks>)
- Isomorphic rendering
- [SVG charts](<http://nivo.rocks/components?filter=svg>)
- [HTML charts](<http://nivo.rocks/components?filter=html>)
- [Canvas charts](<http://nivo.rocks/components?filter=canvas>)
- [server side rendering API](<https://github.com/plouc/nivo-api>)
- [SVG patterns](<http://nivo.rocks/guides/patterns>)
- [Gradients](<http://nivo.rocks/guides/gradients>)
- [responsive charts](<http://nivo.rocks/components?q=responsive>)


##[billboard.js](https://github.com/naver/billboard.js/ "billboard.js")
[![billboard.js](<https://camo.githubusercontent.com/aa22809b2d2df3249d772e56f42e89e0d12d23c42638a7b1973b47e7d2cd209e/68747470733a2f2f6e617665722e6769746875622e696f2f62696c6c626f6172642e6a732f696d672f6c6f676f2f62696c6c626f6172642e6a732e737667>)](<https://camo.githubusercontent.com/aa22809b2d2df3249d772e56f42e89e0d12d23c42638a7b1973b47e7d2cd209e/68747470733a2f2f6e617665722e6769746875622e696f2f62696c6c626f6172642e6a732f696d672f6c6f676f2f62696c6c626f6172642e6a732e737667>)

billboard.js is a re-usable, easy interface JavaScript chart library, based on [D3.js](<https://d3js.org/>).

> The name "billboard" comes from the famous `billboard chart` which everybody knows.
> 
> - [Why we decided to start billboard.js?](<https://github.com/naver/billboard.js/wiki/Why-we-decided-to-start-billboard.js%3F>)
> 
> 



## Supported chart types

[![](<https://camo.githubusercontent.com/eea68068dd5e33b56a05f060e85b6432ad9f57211ea4b2aac62ee3572ea791f0/68747470733a2f2f6e617665722e6769746875622e696f2f62696c6c626f6172642e6a732f696d672f63686172742d74797065732e706e673f763d39>)](<https://camo.githubusercontent.com/eea68068dd5e33b56a05f060e85b6432ad9f57211ea4b2aac62ee3572ea791f0/68747470733a2f2f6e617665722e6769746875622e696f2f62696c6c626f6172642e6a732f696d672f63686172742d74797065732e706e673f763d39>)



## Download and Installation

Download dist files from the repo directly or install it via npm.



### For development (Uncompressed)

You can download the uncompressed files for development

Latest

- [https://naver.github.io/billboard.js/release/latest/dist/billboard.js](<https://naver.github.io/billboard.js/release/latest/dist/billboard.js>)
- [https://naver.github.io/billboard.js/release/latest/dist/billboard.css](<https://naver.github.io/billboard.js/release/latest/dist/billboard.css>)


Specific version

- [https://naver.github.io/billboard.js/release/[VERSION]/dist/billboard.js](<https://naver.github.io/billboard.js/release/%5BVERSION%5D/dist/billboard.js>)
- [https://naver.github.io/billboard.js/release/[VERSION]/dist/billboard.css](<https://naver.github.io/billboard.js/release/%5BVERSION%5D/dist/billboard.css>)



## [react-vis ](http://uber.github.io/react-vis "react-vis ")
 [Demos](<http://uber.github.io/react-vis/examples/showcases/axes>) \| [Docs](<http://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project>)

A COMPOSABLE VISUALIZATION SYSTEM

[![demo](<https://github.com/uber/react-vis/raw/master/docs/assets/react-vis.gif?raw=true>)](<https://github.com/uber/react-vis/blob/master/docs/assets/react-vis.gif?raw=true>)



### Overview

A collection of react components to render common data visualization charts, such as **line/area/bar charts**, **heat maps**, **scatterplots**, **contour plots**, **hexagon heatmaps**, **pie and donut charts**, **sunbursts**, **radar charts**, **parallel coordinates**, and **tree maps**.

Some notable features:

- Simplicity. `react-vis` doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
- Flexibility. `react-vis` provides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.
- Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
- Integration with React. `react-vis` supports the React's lifecycle and doesn't create unnecessary nodes.


# [react-chartjs-2](<http://reactchartjs.github.io/react-chartjs-2>)

React wrapper for Chart.js 2.0 and 3.0, the most popular charting library 📊

React wrapper for [Chart.js](<http://www.chartjs.org/docs/#getting-started>)


## Examples

Live: [reactchartjs.github.io/react-chartjs-2](<https://reactchartjs.github.io/react-chartjs-2/#/>)

See [these examples](<https://github.com/reactchartjs/react-chartjs-2/blob/master/example>) for more information


More react resource❤️ [A curated list of awesome React frameworks, libraries and Components. ](https://bestofreactjs.com/  "A curated list of awesome React frameworks, libraries and Components. ")