Recharts — Area, Bar, and Composed Charts

Image for post
Image for post
Photo by Frank Busch on Unsplash

We can add charts easily to a React app with Recharts.

In this article, we’ll look at how to use it.

Area Chart

We can create an area chart with the AreaChart component:

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

We pass in the width and height props to set the dimensions.

The margin has the margin.

CartesianGrid has the grid to display.

XAxis has the x-axis.

YAxis has the y-axis.

Tooltip shows the values when we hover over the point.

Area fills the rea with the given color between the line and the x-axis.

The dataKey has the property name that has the value we want to display.

Bar Chart

To create a bar chart, we can use the BarChart component,

For example, we can write:

import React from "react";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend
} 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
}
];
export default function App() {
return (
<div className="App">
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="pv" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
</div>
);
}

to add our bar chart.

BarChart can hold multiple bars.

The dataKey has the property name that has the value we want to display.

fill has the fill color of the bars.

Composing Charts

We can have multiple graphs in one chart.

For example, we can write:

import React from "react";
import {
ComposedChart,
Line,
Area,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
Scatter
} 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
}
];
export default function App() {
return (
<div className="App">
<ComposedChart
width={500}
height={400}
data={data}
margin={{
top: 20,
right: 20,
bottom: 20,
left: 20
}}
>
<CartesianGrid stroke="#f5f5f5" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
<Bar dataKey="pv" barSize={20} fill="#413ea0" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>
</div>
);
}

to add multiple charts with Recharts.

We just all the components into the ComposedChart component.

Legend has the legend for the graphs.

The type prop sets the type of the area chart.

Conclusion

We can create various kinds of charts with Recharts.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store