Top 3 React Chart Libraries Quick Review.

Today most of the web application, web sites or E-commerce Platform you work on require Data Manipulation. The Best way to render Data visualization through different type of charts.

In this article we are reviewing top three react libraries which you can use in your project. Here I am adding step by step guide which one you should pick for your project.

1. Chart JS

React-chartjs-2 is a wrapper for Chartjs an already well developed JS library that has all the essential charts and more.

Here, You can checkout about React-chartjs-2 npm package. This is optimal library. Popularity, Quality and Maintenance are quite well above average which is great!

This library is wrapper of popular chart.js latest version 2. Simple and Easy way to get it working and it offers all type of charts.

If you are looking for simple and easy integration of big data and display it with many different types of charts, you can go for this library.

Chart.js charts are rendered using canvas element. It also provides accessibility and responsive layout which helps easy and useful rendering.

Here is the sample code, how would you use it in your project.

You need to first install NPM packages to make it work.

Run this:

npm install --save react-chartjs-2 chart.js

Now, create Customchart.js as component and add code snippet as below. Now you can import Customchart component anywhere in your app to display chart.

Here is the basic bar chart out of the box and you can customize it with different styling.

import React, { Component } from "react";
import { Bar } from 'react-chartjs-2';

const state = {
  labels: ['January', 'February', 'March',
    'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
  datasets: [
    {
      label: 'Sale',
      backgroundColor: 'rgba(75,132,192,1)',
      borderColor: 'rgba(0,0,0,1)',
      borderWidth: 2,
      data: [72, 59, 65, 81, 56, 49, 86, 32, 28, 45, 76, 92]
    }
  ]
}
export default class Customchart extends Component {
  render() {
    return (
      <div>
        <Bar
          data={state}
          options={{
            title: {
              display: true,
              text: 'Average Sale per month in %',
              fontSize: 20
            },
            legend: {
              display: true,
              position: 'right'
            }
          }}
        />
      </div>
    );
  }
}

2. Recharts

Recharts is the most well known library, it is super simple and well-built library of composable charts.

It is popular and quality and maintenance is also great. It is Very Lightweight and uses SVG charts. It is most popular chart library in developer community and also provides extensive documentation.

Here, You can checkout about Recharts npm package.

If you are working on complex web application where you have to consider loading light weight library then you should go with Recharts.

Checkout the sample code and how would you use it in your project.

You need to first install NPM packages to make it work.

Run this:

npm install --save recharts

Let's create Customchart.js as component and add code snippet as below. Now you can import Customchart component anywhere in your app to display chart.

Below is the basic bar chart out of the box and you can customize it with different styling.

import React, { Component } from "react";
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip} from 'recharts';

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
];
export default class Customchart extends Component {
  render() {
    return (
      <AreaChart
        width={600}
        height={400}
        data={data}
        margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area
          type='monotone'
          dataKey='uv'
          stroke='#8884d8'
          fill='#8884d8'
        />
      </AreaChart>
    );
  }
}

3. 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.

Checkout the sample code and how would you use it in your project.

You need to first install NPM packages to make it work.

Run this:

npm install --save recharts

Let's create Customchart.js as component and add code snippet as below. Now you can import Customchart component anywhere in your app to display chart.

Below is the basic bar chart out of the box and you can customize it with different styling.

import React, { Component } from "react";
import { render } from "react-dom";
import { ResponsiveBar } from "@nivo/bar";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center",
  height: "50vh",
  width: "60vw",
  background: "white",
};

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];
export default class Chart extends Component {
  render() {
    return (
      <div style={styles}>
        <h1>Nivo basic demo</h1>
        <div style={{ height: "400px" }}>
          <ResponsiveBar data={data} keys={["earnings"]} indexBy="quarter" />
        </div>
      </div>
    )
  }
}