Charts in React JS - a complete guide

Hello Everyone!

In this post we will be learning how to create a graphs and charts easily in React JS. We will be discussing many types of charts, from line to pie! Let's get started!

---

Getting Started

One of the easiest and most popular chart library for React is Recharts . With this Charting library, you can fulfil all your data visualisation needs, from simple line charts to complex Scatter charts and Composed charts.

Installation

To get started, install Recharts. For React, I would suggest installing it with npm using the following command (although the UMD build is also available on unpkg.com ):

npm install recharts

How it works

For any type of chart, you need to import a few things. Namely, the specific Chart component itself and the axes. With Recharts, you can customize almost everything about your charts and also add interactivity in the form of tooltips and labels.

You also need two sets of data for any chart, one for each axis. In most cases, the data is in the form of an array or an array of objects that can be assigned to a specific axis.

You can also make your charts responsive by using the ResponsiveContainer component and also add legends, g

Types of Charts

We will look at the following types in this post:

1. Bar Charts
2. Line Charts
3. Area Charts

Bar Charts

To create a Bar Chart, first import the following components:

import React from "react";
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  CartesianGrid,
} from "recharts";

The data

We will use the following test data for all our examples:

const data = [
    {
      name: "Item 1",
      score: 1700
    },
    {
      name: "Item 2",
      score: 4000
    },
    {
      name: "Item 3",
      score: 2700
    },
    {
      name: "Item 4",
      score: 4300
    },
    {
      name: "Item 5",
      score: 6300
    }
  ];

The Chart

Now let's use the above data and the imported components to create a bar chart:

import React from "react";
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  CartesianGrid,
} from "recharts";

function App() {
  const data = [
    {
      name: "Item 1",
      score: 1700
    },
    {
      name: "Item 2",
      score: 4000
    },
    {
      name: "Item 3",
      score: 2700
    },
    {
      name: "Item 4",
      score: 4300
    },
    {
      name: "Item 5",
      score: 6300
    }
  ];

  return (
    <ResponsiveContainer width="50%" height={400}>
      <BarChart data={data}>
        <Bar dataKey="score" fill="#8884d8" />
        <XAxis dataKey="name" />
        <YAxis />
      </BarChart>
    </ResponsiveContainer>
  );
}

export default App;

Lets go over this code. We are firstly creating a responsive container and setting its width and height. Next, the bar chart is created and the data is added to it using the data prop. The X-axis will have the name so we are assigning the corresponding dataKey to it.

We will not do anything to the Y-Axis because it will automatically set the data by looking at our Bar component, which will have the score data key.

Customizing

Next, let's customize it and add a grid,tooltip and a legend to our chart. We can also change the fill color and stroke of the bar and grid respectively. Complete docs here :

return (
    <ResponsiveContainer width="50%" height={400}>
      <BarChart data={data}>
        <Bar dataKey="score" fill="#8884d8" />
        <XAxis dataKey="name" />
        <YAxis />
        <Legend />
        <Tooltip />
        <CartesianGrid />
      </BarChart>
    </ResponsiveContainer>
);

Your Complete Bar Chart will be looking like this now:

Line Charts

Creating Line Charts is very similar to bar charts, we just need to import a different set of components The same data will be used.

import React from "react";
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  CartesianGrid,
} from "recharts";

function App() {

  return (
    <ResponsiveContainer width="90%" height={400}>
      <LineChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Line dataKey="score" />
        <Tooltip />
        <Legend />
        <CartesianGrid strokeDasharray="3 3"/>
      </LineChart>
    </ResponsiveContainer>
  );
}

export default App;

You Chart will look like this:

Area Chart

Everything will be similar to above charts except for the use of AreaChart and Area - you get the point.

In this case, I will use gradient to make the chart look good.

I am not including data in this code snippet but it is the same one as bar chart.

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

function App() {
  return (
    <ResponsiveContainer width="90%" height={400}>
      <AreaChart data={data}>
        <defs>
          <linearGradient id="gradient" x1="1" y2="1">
            <stop offset="10%" stopColor="#08009e" stopOpacity={1} />
            <stop offset="100%" stopColor="#08009e" stopOpacity={0.1} />
          </linearGradient>
        </defs>
        <XAxis dataKey="name" />
        <YAxis />
        <Area dataKey="score" type="monotone" fill="url(#gradient)" />
        <Tooltip />
        <Legend />
        <CartesianGrid strokeDasharray="3 3" />
      </AreaChart>
    </ResponsiveContainer>
  );
}

export default App;

Your Area Chart will look like this:

---

And that is pretty much it. I hope you all learned something new. Until next time, Cheers! 🎉