React Area chart using recharts example

React Area chart using recharts example; In this article, I will explain how to create an area chart using the Rechart library in ReactJS, This library is used to build various types of charts in ReactJS like Line charts, Pie charts, and Area charts, etc…

Today we will learn area charts, to create an area chart we firstly create a cartesian grid and X-axis and Y-Axis, Recharts library provides an AreaChart component we just need to prepare the dataset and pass it into the AreaChart component.

You can download the working example of recharts area chart example https://github.com/technostuf/react-area-chart-example

Step 1 – Create a React application

Create a React app using the below command

  create-react-app react-area-chart-example

After running the above command system will create a new folder “react-area-chart-example” so you need to move into that folder, use the below command to change the directory.

 cd react-area-chart-example

Step 2 – Install Recharts library

Recharts is a popular library for creating charts, Rechart library will be used for creating an area chart so we need to first install this library, copy the below command and run your terminal.

  npm install --save recharts

Step 3 – Add code to the file

Create an AreaChartComponent.js component file to hold the area chart code separate from another component and put the below code into that file.

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

const data = [
    {
        name: "Jan",
        buy: 4000,
        sell: 2400,
    },
    {
        name: "Feb",
        buy: 3000,
        sell: 1398,
    },
    {
        name: "Mar",
        buy: 2000,
        sell: 9800,
    },
    {
        name: "Apr",
        buy: 2780,
        sell: 3908,
    },
    {
        name: "May",
        buy: 1890,
        sell: 4800,
    },
    {
        name: "Jun",
        buy: 2390,
        sell: 3800,
    },
    {
        name: "Jul",
        buy: 3490,
        sell: 4300,
    },
    {
        name: "Aug",
        buy: 3490,
        sell: 4300,
    },
    {
        name: "Sep",
        buy: 3490,
        sell: 4300,
    },
    {
        name: "Oct",
        buy: 3490,
        sell: 4300,
    },
    {
        name: "Nov",
        buy: 3490,
        sell: 4300,
    },
    {
        name: "Dec",
        buy: 3490,
        sell: 4300,
    }
];

const AreaChartComponent = (props) => {
    return (
        <>
            <div>
                <div class="ml-5 row d-flex justify-content-center text-center">
                    <h1>React Area Chart - technostuf.com</h1>
                    <hr />
                    <div className="col-md-8">
                        <ResponsiveContainer width={500} height={400}>
                            <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="sell" name="Sell" stroke="#8884d8" fill="#8884d8" />
                                <Area type="monotone" dataKey="buy" name="Buy" stroke="#ffc658" fill="#ffc658" />
                            </AreaChart>
                        </ResponsiveContainer>
                    </div>
                </div>
            </div>
        </>
    );
}
export default AreaChartComponent;

After adding a code in AreaChartComponent, We need to import this file App.js file

import './App.css';
import AreaChartComponent from './AreaChartComponent';

function App() {
  return (
    <div className="App">
      <AreaChartComponent />
    </div>
  );
}

export default App;

Run a React application

Run the React application using the following command.

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download the working example of recharts area chart example

https://github.com/technostuf/react-area-chart-example