Recharts — Scatter and Pie Charts

Image for post
Image for post
Photo by Chris Liverani on Unsplash

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

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

Scatter Chart

We can add a scatter chart with the ScatterChart component.

For example, we can write:

import React from "react";
import {
ScatterChart,
Scatter,
XAxis,
YAxis,
CartesianGrid,
Tooltip
} from "recharts";
const data = [
{ x: 100, y: 200, z: 200 },
{ x: 120, y: 100, z: 260 },
{ x: 170, y: 300, z: 400 }
];
export default function App() {
return (
<div className="App">
<ScatterChart
width={400}
height={400}
margin={{
top: 20,
right: 20,
bottom: 20,
left: 20
}}
>
<CartesianGrid />
<XAxis type="number" dataKey="x" name="stature" unit="cm" />
<YAxis type="number" dataKey="y" name="weight" unit="kg" />
<Tooltip cursor={{ strokeDasharray: "3 3" }} />
<Scatter name="A school" data={data} fill="#8884d8" />
</ScatterChart>
</div>
);
}

We nest the components of our chart inside the ScatterChart component.

width and height has the dimensions.

margin has the margins of the chart.

CartesianGrid has the grid in the background.

XAxis has the x-axis with the labels.

type sets the type of the x-axis.

dataKey has the property name with the values we want to display as labels.

unit has the unit we want to display at the end of the label.

Tooltip has the tooltip.

Scatter has the dots we want to display.

data has the x and y coordinates of the dots.

fill has the dot’s color.

Pie Chart

We can add a pie chart with the PieChart component.

For example, we can write:

import React from "react";
import { PieChart, Pie, Tooltip } from "recharts";
const data = [
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 }
];
export default function App() {
return (
<div className="App">
<PieChart width={400} height={400}>
<Pie
dataKey="value"
isAnimationActive={false}
data={data}
cx={200}
cy={200}
outerRadius={80}
fill="#8884d8"
label
/>
<Tooltip />
</PieChart>
</div>
);
}

to add our pie chart.

The Pie component defines the slices.

data has the data.

dataKey is the property name with the value for the slices.

label adds the labels.

fill has the fill color for the slices.

cx and cy circle’s length and width.

We can add a pie chart with 2 levels:

For example, we can write:

import React from "react";
import { PieChart, Pie, Tooltip } from "recharts";
const data = [
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 }
];
const data2 = [
{ name: "A1", value: 100 },
{ name: "A2", value: 300 },
{ name: "B1", value: 100 }
];
export default function App() {
return (
<div className="App">
<PieChart width={400} height={400}>
<Pie
data={data}
dataKey="value"
cx={200}
cy={200}
outerRadius={60}
fill="#8884d8"
/>
<Pie
data={data2}
dataKey="value"
cx={200}
cy={200}
innerRadius={70}
outerRadius={90}
fill="#82ca9d"
label
/>
</PieChart>
</div>
);
}

We set the outerRadius to the radius of the circle.

innerRadius and outerRadius together makes it a ring.

outerRadius is subtracted by the innerRadius .

Conclusion

We can add pie charts and scatter charts easily 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