Recharts — Radar and Radial Bar Charts

Image for post
Image for post
Photo by Luke Chesser on Unsplash

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

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

Radar Chart

We can add a radar chart with the Radar and RadarChart components.

For example, we can write:

import React from "react";
import {
Radar,
RadarChart,
PolarGrid,
PolarAngleAxis,
PolarRadiusAxis
} from "recharts";
const data = [
{
subject: "Math",
A: 120,
B: 110,
fullMark: 150
},
{
subject: "Science",
A: 98,
B: 130,
fullMark: 150
},
{
subject: "English",
A: 86,
B: 130,
fullMark: 150
}
];
export default function App() {
return (
<div className="App">
<RadarChart
cx={300}
cy={250}
outerRadius={150}
width={500}
height={500}
data={data}
>
<PolarGrid />
<PolarAngleAxis dataKey="subject" />
<PolarRadiusAxis />
<Radar
name="Mike"
dataKey="A"
stroke="#8884d8"
fill="#8884d8"
fillOpacity={0.6}
/>
</RadarChart>
</div>
);
}

We add the RadarChart component to wrap around the points.

outerRadius has the radius of the radar chart.

width and height has the dimensions.

PolarGrid adds the grid lines.

PolarAngleAxis sets the axis.

The dataKey prop is set to the property name of the key.

PolarRadiusAxis has the axes with the numbers.

Radar has the radar chart values.

dataKey has the property name with the values for the radar chart.

fill has the fill color.

stroke has the stroke color for the radar chart.

fillOpacity sets the opacity for the fill of the shape connected by the dots.

Radial Bar Chart

Recharts lets us add radial bar charts.

For example, we can write:

import React from "react";
import { RadialBarChart, RadialBar, Legend } from "recharts";
const data = [
{
name: "18-24",
uv: 31,
pv: 2400,
fill: "#8884d8"
},
{
name: "25-29",
uv: 26,
pv: 4567,
fill: "#83a6ed"
},
{
name: "30-34",
uv: 17,
pv: 1398,
fill: "#8dd1e1"
}
];
const style = {
top: 0,
left: 350,
lineHeight: "24px"
};
export default function App() {
return (
<div className="App">
<RadialBarChart
width={500}
height={300}
cx={150}
cy={150}
innerRadius={20}
outerRadius={140}
barSize={10}
data={data}
>
<RadialBar
minAngle={15}
label={{ position: "insideStart", fill: "#fff" }}
background
clockWise
dataKey="uv"
/>
<Legend
iconSize={10}
width={120}
height={140}
layout="vertical"
verticalAlign="middle"
wrapperStyle={style}
/>
</RadialBarChart>
</div>
);
}

The RadialBarChart has the bars.

width and height has the dimensions of the radial bar chart.

innerRadius and outerRadius defines the radii for the innermost and outermost rings.

data has the data we want to display.

RadialBar has the radial bars to display.

clockwise makes it animate clockwise.

dataKey has the property name with the value for the bars.

background makes a background color display.

Legend has the legend for the bars.

layout sets the layout for the legend.

verticalAlign sets the vertical alignment.

wrapperStyle has the style for the legend’s wrapper element.

iconSize sets the size of the icons.

width and height sets the dimensions of the legend.

Conclusion

We can add radar and radial bar 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