Recharts — Scatter and Pie Charts

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.