Recharts — Radar and Radial Bar Charts

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.