Create a Radar Chart using Recharts in ReactJS

Radar charts, also known as spider or star charts, provide a powerful way to display data having multiple variable in a circular layout. Recharts is a popular charting library that is used for creating charts for React JS, provides an easy and efficient method to implement radar charts within your React applications.

Prerequisites:

Basic understanding of ReactJS and its concepts.
A React project set up with Recharts installed.

Approach: To create Radar chart using Recharts, we create a dataset with label and polar coordinate details. Then we create a polar grid and both axes i.e. polarAngle axis and polarRadius axis using data coordinates. Finally using the Radar element draws the Radar plot.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required modules using the following command.
```
npm install --save recharts
```

Project Structure:

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react';
import { Radar, RadarChart, PolarGrid, 

    PolarAngleAxis, PolarRadiusAxis } from 'recharts';
 
const App = () => {
 
    // Sample data

    const data = [

        { name: 'A', x: 21 },

        { name: 'B', x: 22 },

        { name: 'C', x: -32 },

        { name: 'D', x: -14 },

        { name: 'E', x: -51 },

        { name: 'F', x: 16 },

        { name: 'G', x: 7 },

        { name: 'H', x: -8 },

        { name: 'I', x: 9 },

    ];
 
    return (

        <RadarChart height={500} width={500} 

            outerRadius="80%" data={data}>

            <PolarGrid />

            <PolarAngleAxis dataKey="name" />

            <PolarRadiusAxis />

            <Radar dataKey="x" stroke="green"

                fill="green" fillOpacity={0.5} />

        </RadarChart>

    );
}
 
export default App;