DEV Community

Cover image for Top 5 React Chart Libraries for 2020
Eden Ella
Eden Ella

Posted on • Updated on • Originally published at blog.bitsrc.io

React Graph Top 5 React Chart Libraries for 2020

Useful open-source data visualization libraries for your React application.

Charts are like wheelchairs for our feeble minds. If you want to make a data-informed decision, you better get the right help 🙂

“There is magic in graphs. The profile of a curve reveals in a flash a whole situation — the life history of an epidemic, a panic, or an era of prosperity. The curve informs the mind, awakens the imagination, convinces.

[…] Words have wings, but graphs interpret. Graphs are pure quantity, stripped of verbal sham, reduced to dimension, vivid, unescapable.”

— Willard C. Brinton, 1939

Using the right type of chart is one decision to make when presenting data but as React developers, we have our own set of concerns, mainly, choosing the right chart component library.

So, what are my criteria for a good chart library?

  1. It should be highly customizable

  2. It should have an easy API and a clear and comprehensible documentation

  3. It should present a good UI/UX

  4. It should be widely adopted and tested (why be the guinea pig?)

One important tip to keep in mind — components are all about reusability and standardization — that’s a good way to guarantee a consistent UI and easy maintenance. Use platforms like Bit to share your components, reuse them across apps, and let everyone collaborate together to build your products with atomic components. To avoid repeated copy-pasting, try making your own customized React chart library with Bit for your future-self and others 😉

Example: Rechart’s component collection in Bit’s component hub

So, without further ado, here is my list of top 5 React chart libraries:

1. Rechart

Rechart (built with D3.js) is all about modularity and simplicity. The grid, the tooltip, the line items, etc. are all reusable React components; that makes it much easier to customize charts and even reuse your own customized “sub-chart” components in other chart-compositions.

GitHub logo recharts / recharts

Redefined chart library built with React and D3

Recharts

Sponsors on Open Collective Backers on Open Collective Build Status Coverage Status npm version npm downloads MIT License

Introduction

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:

  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.

Examples

<LineChart
  width={400}
  height={400}
  data={data}
  margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
  <XAxis dataKey="name" />
  <Tooltip />
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
  <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId=
Enter fullscreen mode Exit fullscreen mode

2. Victory

By offering a highly opinionated component ecosystem with fully overridable styling and behavior, Victory keeps the right balance between ease-of-use and high customizability.

Victory is also a good choice for those of us who are looking for a cross-platform solution. It has an almost identical API for both ReactJS and React Native — an important thing to keep in mind.

Example: A transition animation in a Victory chart component

GitHub logo FormidableLabs / victory

A collection of composable React components for building interactive data visualizations

victory

an ecosystem of composable React components for building interactive data visualizations

weekly downloads current version build status Gzip size Maintenance Status

Victory

Contents

Getting started

  1. Add Victory to your project:
# npm
$ npm i --save victory
# or yarn
$ yarn add victory
Enter fullscreen mode Exit fullscreen mode
  1. Add your first Victory component:
import React from "react";
import { render } from "react-dom";
import { VictoryPie } from "victory";

const PieChart = () => {
  return <VictoryPie />;
};

render(<PieChart />, document.getElementById("app"));
Enter fullscreen mode Exit fullscreen mode
  1. VictoryPie component will be rendered, and you should see:

pie

Requirements

Projects using Victory should also depend on React. Victory works with React version 15

3. Nivo

Nivo (also, built with D3js) wins two awards: The first is for its beautiful UI and the second is for the incredible “interactive documentation”. Instead of reading long docs, Nivo offers an amazing UI for playing and tweaking with your chart components. Then, whenever you’re ready, simply copy-paste your tweaked chart’s code (and of course, with time, tweaking the code directly would be the preferable way but the journey to mastering Nivo’s API would be brief and painless)

Example: Tweaking a bubble component on Nivo’s playground

GitHub logo plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo

Backers on Open Collective Sponsors on Open Collective License GitHub Actions NPM version nivo channel on discord

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

Discussion

Join the nivo discord community.

Packages & components

nivo is comprised of several packages/components, for a full list, please use the components explorer.

HTTP API

Components available through the HTTP rendering API.

Guides

Backers

4. Vis

Vis, a library built by Uber, is similar to Recharts in its efforts to keep its component ecosystem as simple and modular as possible. The idea here is — if you know React you know Vis and that’s mostly true.

When it comes to aesthetics, Vis is pretty straightforward and simple looking.

GitHub logo uber / react-vis

Data Visualization Components

version build build downloads

react-vis | Demos | Docs

A COMPOSABLE VISUALIZATION SYSTEM

demo

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.

Usage

Install react-vis via npm.

npm install react-vis --save

5. VX

VX is for those who have a very specific idea of how their charts should look and behave but are not yet ready to build their own D3 based component ecosystem. VX is unopinionated and designed to be built on top of. Plus, with VX, keeping your bundle size small is a much easier task than with comparable libraries.

GitHub logo airbnb / visx

🐯 visx | visualization components

Coverage Status

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.


Docs Gallery Blog Slack #visx Changelog Getting started tutorial

Usage

Remix on Glitch

Let's make a simple bar graph.

First we'll install the relevant packages:

$ npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale

import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';
// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;

// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20
Enter fullscreen mode Exit fullscreen mode

Conclusion

That’s my personal list of React data visualization libraries. Hopefully, you’ll find here something the works for you, whether you put more emphasis on aesthetics, ease of use or even the additional KBs added to your bundle size.

Cheers 🍺

Related posts

Top comments (9)

Collapse
 
tomekbuszewski profile image
Tomek Buszewski

I see Recharts is still going strong, after all these years. We've been using it at some point in 2016 and 17, and it was quite good, I have to admit. Very easy to implement and learn, even for less experienced developers. Unfortunately, it misses some financial-specific charts, so we had to use yet another library and eventually we had two libs covered by a facade.

Nevertheless, nice list, I'll be picking one of those tools soon for my new project :)

Collapse
 
rsuttles58 profile image
Rob Suttles

I recently had need of a React visualization library and went with Victory due to the spectacular interactive docs that allow you to play with their chart components before integrating it into your project.

Collapse
 
mike_chen profile image
Mike Chen

If you're not too specific with your requirements, I think Nivo is the easiest choice...

Collapse
 
reuben21 profile image
Reuben Coutinho

which chart component can I use for live updating data, I tried using Recharts, and I passed the state , to the chart but the value was never updated visually,
while printing in the console I saw that the state updated but it never showed in the chart

Collapse
 
reuben21 profile image
Reuben Coutinho

and yess Im using react

Collapse
 
d4rthv4d3r profile image
Julián Chamalé

Unfortunally React-Vis has been deprecated. 😢

Good post!

Collapse
 
mujaddadi profile image
Taha Hassan Mujaddadi

I have problem with all React graph libraries that they don't allow empty graph X and Y scale values. The X and Y scale values are generated based on actual data.

Collapse
 
techguy profile image
Arun

Syncfusion React Charts - Rich & Interactive Graphs with Real-time data syncfusion.com/react-ui-components...

Collapse
 
jailsonpaca profile image
jailsonpaca

thanks! for customization I assume that victory is better