> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Radar chart

> Examples and usage of RadarChart component

The `RadarChart` component displays multivariate data on a radial grid. It's useful for comparing multiple variables or showing performance across different dimensions.

## Basic radar chart

```jsx theme={null}
import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Legend, Tooltip } from 'recharts';

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 },
];

function Example() {
  return (
    <RadarChart width={500} height={400} data={data}>
      <PolarGrid />
      <PolarAngleAxis dataKey="subject" />
      <PolarRadiusAxis />
      <Radar name="Student A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
      <Radar name="Student B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
      <Legend />
      <Tooltip />
    </RadarChart>
  );
}
```

## Single series radar

```jsx theme={null}
<RadarChart width={500} height={400} data={data}>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis angle={90} domain={[0, 150]} />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
  <Tooltip />
</RadarChart>
```

## Custom grid style

```jsx theme={null}
<RadarChart width={500} height={400} data={data}>
  <PolarGrid 
    stroke="#333" 
    strokeDasharray="5 5"
    gridType="circle"
  />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
</RadarChart>
```

<Note>
  `gridType` can be `"polygon"` (default) or `"circle"` to change the grid shape.
</Note>

## Custom angle axis

<CodeGroup>
  ```jsx Default position theme={null}
  <PolarAngleAxis dataKey="subject" />
  ```

  ```jsx Custom tick theme={null}
  <PolarAngleAxis 
    dataKey="subject"
    tick={{ fill: '#666', fontSize: 12 }}
  />
  ```

  ```jsx With domain theme={null}
  <PolarAngleAxis 
    dataKey="subject"
    domain={[0, 150]}
  />
  ```
</CodeGroup>

## Custom radius axis

```jsx theme={null}
<PolarRadiusAxis 
  angle={90} 
  domain={[0, 150]}
  tick={{ fill: '#666' }}
  tickFormatter={(value) => `${value}%`}
/>
```

## Fill and stroke customization

```jsx theme={null}
<Radar 
  name="Series A" 
  dataKey="A" 
  stroke="#8884d8"
  strokeWidth={2}
  fill="#8884d8" 
  fillOpacity={0.3}
  dot={{ r: 4, fill: '#8884d8' }}
  activeDot={{ r: 6 }}
/>
```

## Without fill

```jsx theme={null}
<Radar 
  name="Series A" 
  dataKey="A" 
  stroke="#8884d8"
  strokeWidth={3}
  fill="none"
/>
```

## Custom dots

```jsx theme={null}
<Radar 
  name="Series A" 
  dataKey="A" 
  stroke="#8884d8"
  fill="#8884d8" 
  fillOpacity={0.6}
  dot={{ r: 5, fill: 'red', strokeWidth: 2, stroke: 'white' }}
/>
```

## With labels

```jsx theme={null}
<Radar 
  name="Series A" 
  dataKey="A" 
  stroke="#8884d8"
  fill="#8884d8" 
  fillOpacity={0.6}
  label
/>
```

## Custom start and end angles

```jsx theme={null}
<RadarChart 
  width={500} 
  height={400} 
  data={data}
  startAngle={90}
  endAngle={-270}
>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
</RadarChart>
```

<Note>
  The default `startAngle` is `90` and `endAngle` is `-270`, creating a full circle starting from the top.
</Note>

## Comparison of three series

```jsx theme={null}
<RadarChart width={600} height={400} data={data}>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis angle={90} domain={[0, 150]} />
  <Radar name="Series A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.5} />
  <Radar name="Series B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.5} />
  <Radar name="Full Mark" dataKey="fullMark" stroke="#ffc658" fill="#ffc658" fillOpacity={0.3} />
  <Legend />
  <Tooltip />
</RadarChart>
```

## Custom center position

```jsx theme={null}
<RadarChart 
  width={500} 
  height={400} 
  data={data}
  cx="50%"
  cy="50%"
>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
</RadarChart>
```

## Common pitfalls

* **Missing PolarAngleAxis**: Always include `<PolarAngleAxis dataKey="subject" />` to define the category labels.
* **Domain mismatch**: Ensure the `domain` on `PolarRadiusAxis` matches your data range for proper scaling.
* **Overlapping series**: When showing multiple radar series, use different `fillOpacity` values (0.3-0.6) to see all series clearly.
* **Tooltip event type**: RadarChart only supports `'axis'` tooltip event type.
* **Angle calculation**: The chart starts from `startAngle` and proceeds counterclockwise to `endAngle`.