✨Top React Charts Libraries [2021]

#react #charts

Recharts

Recharts is a Redefined chart library built with React and D3.

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

Simply deploy with React components.
Native SVG support, lightweight depending only on some D3 submodules.
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

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.

For more examples using visx, check out the gallery.

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
Component playground
Exhaustive documentation
Isomorphic rendering
SVG charts
HTML charts
Canvas charts
server side rendering API
SVG patterns
Gradients
responsive charts

billboard.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.

The name "billboard" comes from the famous billboard chart which everybody knows.

Why we decided to start billboard.js?

Supported chart types

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

Specific version

react-vis

Demos | Docs

A COMPOSABLE VISUALIZATION SYSTEM

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.