How to Create Radar Chart Component using React Recharts

In this post, you will learn how to build a radar graph chart in React js application. To create the Radar chart, we will use Recharts library in React functional component along with bootstrap UI package.

Radar charts provide an easy way to simultaneously show multiple variables on a two-dimensional plane. In the radar chart, every variable is plotted on an axis that manifests from a pivot point.

Radar charts are handy for showing data patterns and trends over time or across various categories.

To create a radar chart component in React. We will use Recharts, an open-source library, to build seamless, intuitive charts and graphs in React js environment. Recharts offer greater flexibility for building charts in user interfaces.

React Recharts Radar Chart Example

• Step 1: Setup React Project
• Step 2: Install Recharts Module
• Step 3: Create Function Component
• Step 4: Implement Simple Radar Component
• Step 5: Update App.js File
• Step 6: Run React App

Setup React Project

Open the command-prompt, on the terminal screen type the below command. Press enter to let the CLI create a new React app.

npx create-react-app my-react-app

You have to enter into the project folder.

cd my-react-app

Install Recharts Module

Navigate to your command prompt screen again, type the packages name that you want to add in your React project.

Run the below command to add the libraries.

npm i recharts bootstrap

Create Function Component

To show the data through radar graph, we will have to build a simple javascript function. In react, it is known as functional component.

To bring UI component to life, you have to create the components/ReRadarChart.js file.

import React from "react";
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from "recharts";
function ReRadarChart() {
  return (
     
  );
}
export default ReRadarChart;

Implement Simple Radar Component

We must import and use Radar, RadarChart, PolarGrid, PolarAngleAxis, and PolarRadiusAxis, modules from the recharts package.

You can retrieve the data from the real api, or you can use the dummy data to show the data in React radar chart.

Update code in components/ReRadarChart.js file.

import React from "react";
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from "recharts";
function ReRadarChart() {
  const data = [
    {
      subject: "Math",
      A: 120,
      B: 110,
      fullMark: 150,
    },
    {
      subject: "Chinese",
      A: 98,
      B: 130,
      fullMark: 150,
    },
    {
      subject: "English",
      A: 86,
      B: 130,
      fullMark: 150,
    },
    {
      subject: "Geography",
      A: 99,
      B: 100,
      fullMark: 150,
    },
    {
      subject: "Physics",
      A: 85,
      B: 90,
      fullMark: 150,
    },
    {
      subject: "History",
      A: 65,
      B: 85,
      fullMark: 150,
    },
  ];
  return (
    <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>
  );
}
export default ReRadarChart;

Update App.js File

In order to render the UI on the browser, we will now import the ReRadarChart component into our React application.

Head over to App.js file and import or define the component here.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ReRadarChart from "./components/ReRadarChart";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">
        React Recharts Radar Chart Function Component Example
      </h2>
      <ReRadarChart />
    </div>
  );
}
export default App;

Run React Server

Run the react development server by invoking the given command:

npm start

Open the app in the browser with the help of given URL:

http://localhost:3000

Summary

In this tutorial, we saw how to create radar chart component in React js with the help of Recharts and bootstrap modules.

Recharts is a potent and flexible tool for producing high-quality data visualizations in React.