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.
