How to Create and Customize Area Chart using React Recharts

In this comprehensive tutorial, we will learn how to build an Area chart, and Stacked area chart React js. To design the area chart in React we will use the Recharts and Bootstrap libraries.

An area chart or graph is ideally used to show quantitative data with the help of a series of points connected by a line and shaded regions developed by filling in the covered area inside the line.

Area charts are very useful; they are particularly used to show the changing frequency of data over a period of time.

We will use a fake data set to create an area chart in React. It will show us how data is used in an Area chart to illustrate certain values.

Using the demo data, we will connect the points in the area chart and try showing you the trend through the line.

React Recharts offers various charting components such as line, area, bar, scatter, and pie charts. React Recharts is a charting library built on top of the React and Recharts frameworks.

React Recharts Area Graph Chart Example

• Step 1: Install React App
• Step 2: Install Recharts Package
• Step 3: Create Component File
• Step 4: Create Area Chart Component
• Step 5: Add Component in Main Entry
• Step 6: View App on Browser

Install React App

The first step starts with installing a brand new React application. You can install the fresh React framework using the Create React App tool.

If you want to change the project name, ensure that you change your project from my-react-app to xyz.

npx create-react-app my-react-app

After the app is downloaded, change the project name if you don’t want to keep the given name.

Now, move inside the project directory.

cd my-react-app

Install Recharts Package

Next, you have to type the below command on your CLI screen. After you finished typing the below command; make sure to execute the suggested command.

npm i recharts bootstrap

NPM is the easiest and fastest way to get started using Recharts.

On the other hand, It is considered the best installation method when building single-page applications (SPAs).

Create Component File

Create the components/ folder inside the src/ folder, next you need to make the ReAreaChart.js file.

As you can see, we have imported the Recharts essential modules before the function definition.

import React from "react";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
 
function ReLineChart() {
  return (
    <div>
      
    </div>
  );
}
export default ReLineChart;

Create Area Chart Component

We are now ready to create the area graph chart, make sure to import Area, XAxis, YAxis, CartesianGrid, services on the top part of the file.

You can after that define the AreaChart component. Set the props provided by the Recharts to style or design the area chart in React.

You have to put the given code in the components/ReAreaChart.js file.

import React from "react";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} 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,
  },
];
function ReLineChart() {
  return (
    <div>
      <AreaChart
        width={500}
        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>
    </div>
  );
}
export default ReLineChart;

Add Component in Main Entry

You have to enter into the src/ folder, here you have to look for the src/App.js file. After doing this, your Area chart component will be ready to serve.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ReAreaChart from "./components/ReAreaChart";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Js Rechart Area Chart Example</h2>
      <ReAreaChart />
    </div>
  );
}
export default App;

Test App on Browser

In the steps above, we have followed every step to draw an area graph. Now, the time comes to start the development server.

Execute the given command to run the React server.

npm start

Open the browser, type the given url to test the app:

http://localhost:3000

Summary

In this post, we have step by step learned how to build an area chart component in React using Recharts library. We have also comprehended how to design stacked area chart through Area chart component in React js.

We hope this post will give you basic understanding of working with Recharts in React js environment.