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
Related Post
- React Material UI Form example
- React Material UI Autocomplete with getting selected value
- React Area chart using recharts example
- React Pie chart using recharts with legend and custom label
- React google maps draggable marker example
- React datepicker using the most popular react-datepicker library
- React toast notification using react-toastify with example
- React responsive carousel slider with react-slick
- React tooltip using rc-tooltip with example
- React hook form schema validation using yup