Charting and Graphing in React with Recharts
Tags: chart, graphs, recharts, react
Published: 2023-02-13 00:29:50

by [Precious Onyeije](https://blog.openreplay.com/authors/precious-onyeije)

Graphs and charts are effective visual aids because they make information easy to understand and accessible. Therefore, it is not unexpected that print and electronic media frequently use graphs. Data presented as a graph instead of a table can frequently be simpler to grasp because the graph may demonstrate a pattern or comparison.

Have you ever wondered about adding graphs and charts to a website or other little project for work? So have I, and in this article, I'll show you how to solve this issue in a very simple but effective way.

## Installing and setting up Recharts

[Recharts](https://recharts.org/en-US/guide/getting-started) is a D3 and React-based Redefined chart framework. The main objective of this library is to make it simple for you to add charts to React apps. Recharts' guiding principle is: *Deploy React components simply.*
That said, head into your terminal and type the command below to install the `recharts` package.
 
```
    npm install recharts
```
Once installed, the next thing to do is to import the package components into your project. For this project, we will create several graphs/charts, so I will import a few components, as seen below.

```javascript
    import React from "react";
    import {
      Area,
      AreaChart,
      Bar,
      BarChart,
      Line,
      XAxis,
      YAxis,
      CartesianGrid,
      Tooltip,
      Legend,
      Scatter,
      ScatterChart,
      LineChart,
      PieChart, 
      Pie,
      PolarAngleAxis,
      Radar,
      RadarChart,
      PolarGrid,
      PolarRadiusAxis
    } from "recharts";
```  

We now need to add some data to the project, which will be displayed on the graphs/charts. 
Inside the react function, create a variable that will contain an [array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of the data we will be using for this project.


```javascript
    // Add some mock data
    const data = [
      {
        month: 'January',
        savings: 5000,
        loss: 500
      },
      {
        month: 'February',
        savings: 8000,
        loss: 300
      },
      {
        month: 'March',
        savings: 3000,
        loss: 800
      },
      {
        month: 'April',
        savings: 6000,
        loss: 100
      },
      {
        month: 'May',
        savings: 4000,
        loss: 700
      },
      {
        month: 'June',
        savings: 9000,
        loss: 1200
      },
    ]
```

I have a data variable with an [array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of my monthly budgets, specifically my saves and losses, as can be seen above. With my data, we can now begin making graphs and charts.


## Creating a Line Chart 

To create a simple line chart, you must add a `LineChart` element. Then add width, height, and data to the line chart element as attributes, then open the element. 
Inside the element, add the cartesian grid element, the x-axis element with a `dataKey` of the month, then the y-axis element, tooltip, and legend elements.
Then, add the `Line` element with a `type` of `monotone,` a `dataKey` of savings from our mock data, and a `stroke` that gives the lines a color. 
Repeat the action on the following line but with a different stroke. This is to get two lines in our Line Chart.


```javascript
    <h1>Simple Line chart</h1>
       <LineChart width={1000} height={300} data={data}>
        <CartesianGrid></CartesianGrid>
        <XAxis dataKey="month"></XAxis>
        <YAxis></YAxis>
        <Tooltip> </Tooltip>
        <Legend></Legend>
        <Line type="monotone" dataKey="loss" stroke="green" />
        <Line type="monotone" dataKey="savings" stroke="red"/>
       </LineChart>
```

Once done, save the code and head into your browser. You should see a Line Chart similar to mine below.

![1](./images/image01.png)

## Creating an Area Chart

The process of creating an area chart is quite similar to that of the Line Chart. Still, in this case, you will create an `AreaChart` element and add the cartesian grid element, the x-axis element with a `dataKey` of the month, then the y-axis element, tooltip, and legend elements.
Lastly, You add the two `Area` elements with a `type` of `monotone,` a `dataKey` of savings from our mock data, a `stroke,` and a `fill` for coloring.


```javascript
     <h1>Simple Area Chart</h1>
       <AreaChart width={1000} height={300} data={data}>
        <CartesianGrid></CartesianGrid>
        <XAxis dataKey="month"></XAxis>
        <YAxis></YAxis>
        <Tooltip> </Tooltip>
        <Legend></Legend>
        <Area type="monotone" dataKey="savings" stroke="blue" fill="blue"/>
        <Area type="monotone" dataKey="loss" stroke="green" fill="green"  />
        </AreaChart>
```

After finishing, save the code and open your browser. You ought to see an Area chart that resembles mine below.

![2](./images/image02.png)


<h2>Session Replay for Developers</h2> 
<p><em>
Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data
</em></p>
<img alt="OpenReplay" width="768" height="400" src="https://blog.openreplay.com/assets/overview_Z17Qdyg.png" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em>




## Creating a Pie Chart

You must construct a `PieChart` element to make a pie chart using Recharts and give the element a height and width. Then just below the PieChart element, add the `Pie` element with some attributes such as:
data: the mock data we created at the beginning of the tutorial.
dataKey: the values `savings` and `loss` in the objects. 
nameKey: the `month` value in the object.
cx and cy:  the x and y coordinates of the center.
outerRadius and innerRadius: the outer and inner radius of the sectors.
Then close the PieChart element, and that’s all.


```javascript
<h1>Pie Chart</h1>
<PieChart width={1000} height={300}>
  <Pie
    data={data}
    dataKey="savings"
    nameKey="month"
    name="savings"
    cx="50%"
    cy="50%"
    outerRadius={50}
    fill="#8884d8"
  />
  <Pie
    data={data}
    dataKey="loss"
    nameKey="month"
    name="loss"
    cx="50%"
    cy="50%"
    innerRadius={60}
    outerRadius={80}
    fill="#82ca9d"
    label
  />
</PieChart>
```

It should look like the following:

![3](./images/image03.png)

## Creating a Simple and Stacked Bar Chart

The process of creating a Bar chart is similar to that of the Area chart. Still, in this case, you will be Creating a `BarChart` element and inserting those other elements earlier mentioned, and then replacing the `Area` element with a `Bar` element.

```javascript
<h1>Simple Bar Chart</h1>
<BarChart width={1000} height={300} data={data}>
  <CartesianGrid></CartesianGrid>
  <XAxis dataKey="month"></XAxis>
  <YAxis></YAxis>
  <Tooltip> </Tooltip>
  <Legend></Legend>
  <Bar type="monotone" dataKey="savings" fill="blue"/>
  <Bar type="monotone" dataKey="loss" fill="green"  />
</BarChart>
```

It should look like the following:

![4](./images/image04.png)


Secondly, the Stacked Bar Chart's only distinction from the simple Bar Chart is that a `stackId`  is required and added as an attribute in the bar element, as seen below.


```javascript
<h1>Stacked Bar Charts</h1>
  <BarChart width={1000} height={300} data={data}>
    <CartesianGrid></CartesianGrid>
    <XAxis dataKey="month"></XAxis>
    <YAxis></YAxis>
    <Tooltip> </Tooltip>
    <Legend></Legend>
    <Bar type="monotone" dataKey="savings"  stackId="a" fill="green"/>
    <Bar type="monotone" dataKey="loss" stackId="a" fill="red"  />
</BarChart>
```

Observe the `stackId` added after the `dataKey` inside the bar element. Your stacked bar chart should look like the below:

![5](./images/image05.png)

## Creating a RadarChart

To create a radar chart, you must add a `RadarChart` element with a width and height. Inside the radar Chart element, add a [PolarGrid element](https://recharts.org/en-US/api/PolarGrid), a [PolarAngleAxis element](https://recharts.org/en-US/api/PolarAngleAxis) consisting of a dataKey attribute, a [PolarRadiusAxis element](https://recharts.org/en-US/api/PolarRadiusAxis) consisting of an angle and domain attributes, a `Legend` element and then a [Radar element](https://recharts.org/en-US/api/Radar) that holds some attributes such as the name, dataKey, stroke, fill and fillOpacity. Then finally, close the RadarChart element and head into your browser.


```javascript
<h1>RadarChart</h1>
  <RadarChart outerRadius={90} width={1000} height={300} data={data}>
    <PolarGrid />
    <PolarAngleAxis dataKey="month" />
    <PolarRadiusAxis angle={30} domain={[0, 150]} />
    <Legend />
    <Radar
      name="savings"
      dataKey="savings"
      stroke="#8884d8"
      fill="#8884d8"
      fillOpacity={0.6}
    />
    <Radar
      name="loss"
      dataKey="loss"
      stroke="#82ca9d"
      fill="#82ca9d"
      fillOpacity={0.6}
    />
</RadarChart>
```

Your Radar Chart should look like the below:

![6](./images/image06.png)

## Creating a Simple Scatterplot 

This is quite different from the rest. To create a scatterplot, you would need to add a `Scatterplot` element, and inside this element, add the `cartesian grid` element, the x-axis element with a `name` attribute `month` and a `unit` month. The y-axis element too will have an Id set to left and a `type` of number, `dataKey` of savings, and `name` savings with a stroke.
We will also have a second y-axis with an Id set to right, a `type` of number, a `dataKey`, and `name` of loss with a stroke. This sets the losses at the right side of the chart, as seen below.
Then add the tooltip elements (Observe that the Legend element was not added)
Then add two `Scatter` elements below, one with the Id set as left and the other set as right, and include the `data` and two `fill` colors as attributes.


```javascript
<h1>Simple Scatterplot</h1>
<ScatterChart
  width={750}
  height={250}
  margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
>
  <CartesianGrid />
  <XAxis name="month" unit="month" />
  <YAxis
    yAxisId="left"
    type="number"
    dataKey="savings"
    name="savings"
    stroke="#8884d8"
  />
  <YAxis
    yAxisId="right"
    type="number"
    dataKey="loss"
    name="loss"
    orientation="right"
    stroke="#82ca9d"
  />
  <Tooltip cursor={{ strokeDasharray: "3 3" }} />
  <Scatter yAxisId="left" name="Savings" data={data} fill="#8884d8" />
  <Scatter yAxisId="right" name="loss" data={data} fill="#82ca9d" />
</ScatterChart>
```

Once saved, your scatterplot should look like the below:

![7](./images/image07.png)

## Conclusion

We have investigated a method that makes using charts and graphs in everyday work considerably simpler, quicker, and less laborious. Recharts significantly reduces this burden and makes it more orderly without the addition of a style or many functions.

Github repo: https://github.com/Preshy30/charting-with-recharts.git




[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)