Hello Everyone!
In this post we will be learning how to create a graphs and charts easily in React JS. We will be discussing many types of charts, from line to pie! Let's get started!
Getting Started
One of the easiest and most popular chart library for React is Recharts. With this Charting library, you can fulfil all your data visualisation needs, from simple line charts to complex Scatter charts and Composed charts.
Installation
To get started, install Recharts. For React, I would suggest installing it with npm using the following command (although the UMD build is also available on unpkg.com ):
npm install recharts
How it works
For any type of chart, you need to import a few things. Namely, the specific Chart component itself and the axes. With Recharts, you can customize almost everything about your charts and also add interactivity in the form of tooltips and labels.
You also need two sets of data for any chart, one for each axis. In most cases, the data is in the form of an array or an array of objects that can be assigned to a specific axis.
You can also make your charts responsive by using the ResponsiveContainer component and also add a legend.
Types of Charts
We will look at the following types in this post:
- Bar Charts
- Line Charts
- Area Charts
Bar Charts
To create a Bar Chart, first import the following components:
import React from "react";
import {
ResponsiveContainer,
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
Legend,
CartesianGrid,
} from "recharts";
The data
We will use the following test data for all our examples :
const data = [
{
name: "Item 1",
score: 1700
},
{
name: "Item 2",
score: 4000
},
{
name: "Item 3",
score: 2700
},
{
name: "Item 4",
score: 4300
},
{
name: "Item 5",
score: 6300
}
];
The Chart
Now let's use the above data and the imported components to create a bar chart:
import React from "react";
import {
ResponsiveContainer,
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
Legend,
CartesianGrid,
} from "recharts";
function App() {
const data = [
{
name: "Item 1",
score: 1700
},
{
name: "Item 2",
score: 4000
},
{
name: "Item 3",
score: 2700
},
{
name: "Item 4",
score: 4300
},
{
name: "Item 5",
score: 6300
}
];
return (
<ResponsiveContainer width="50%" height={400}>
<BarChart data={data}>
<Bar dataKey="score" fill="#8884d8" />
<XAxis dataKey="name" />
<YAxis />
</BarChart>
</ResponsiveContainer>
);
}
export default App;
Lets go over this code. We are firstly creating a responsive container and setting its width and height. Next, the bar chart is created and the data is added to it using the data prop. The X-axis will have the name so we are assigning the corresponding dataKey to it.
We will not do anything to the Y-Axis because it will automatically set the data by looking at our Bar component, which will have the score data key.
Customizing
Next, let's customize it and add a grid,tooltip and a legend to our chart. We can also change the fill color and stroke of the bar and grid respectively. Complete docs here :
return (
<ResponsiveContainer width="50%" height={400}>
<BarChart data={data}>
<Bar dataKey="score" fill="#8884d8" />
<XAxis dataKey="name" />
<YAxis />
<Legend />
<Tooltip />
<CartesianGrid />
</BarChart>
</ResponsiveContainer>
);
Your Complete Bar Chart will be looking like this now:
Line Charts
Creating Line Charts is very similar to bar charts, we just need to import a different set of components The same data will be used.
import React from "react";
import {
ResponsiveContainer,
LineChart,
Line,
XAxis,
YAxis,
Tooltip,
Legend,
CartesianGrid,
} from "recharts";
function App() {
return (
<ResponsiveContainer width="90%" height={400}>
<LineChart data={data}>
<XAxis dataKey="name" />
<YAxis />
<Line dataKey="score" />
<Tooltip />
<Legend />
<CartesianGrid strokeDasharray="3 3"/>
</LineChart>
</ResponsiveContainer>
);
}
export default App;
You Chart will look like this:
Area Chart
Everything will be similar to above charts except for the use of AreaChart and Area - you get the point.
In this case, I will use gradient to make the chart look good.
I am not including data in this code snippet but it is the same one as bar chart.
import React from "react";
import {
ResponsiveContainer,
AreaChart,
Area,
XAxis,
YAxis,
Tooltip,
Legend,
CartesianGrid,
} from "recharts";
function App() {
return (
<ResponsiveContainer width="90%" height={400}>
<AreaChart data={data}>
<defs>
<linearGradient id="gradient" x1="1" y2="1">
<stop offset="10%" stopColor="#08009e" stopOpacity={1} />
<stop offset="100%" stopColor="#08009e" stopOpacity={0.1} />
</linearGradient>
</defs>
<XAxis dataKey="name" />
<YAxis />
<Area dataKey="score" type="monotone" fill="url(#gradient)" />
<Tooltip />
<Legend />
<CartesianGrid strokeDasharray="3 3" />
</AreaChart>
</ResponsiveContainer>
);
}
export default App;
Your Area Chart will look like this:
And that is pretty much it. I hope you all learned something new. Until next time, Cheers! 🎉
Top comments (0)