Recharts — Scatter and Pie Charts

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.