> ## 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

> Renders a radar chart polygon in a polar chart

Renders a radar chart polygon in a polar chart. The Radar component displays data as a polygon where each vertex represents a data point on a radial axis.

## Usage

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

const data = [
  { subject: 'Math', A: 120, B: 110 },
  { subject: 'Chinese', A: 98, B: 130 },
  { subject: 'English', A: 86, B: 130 },
];

<RadarChart width={500} height={500} data={data}>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
</RadarChart>
```

## Props

### Data

<ParamField path="dataKey" type="DataKey<any>" required>
  The key of data values displayed on the radar chart.

  Can be a string, number, function, or array path.
</ParamField>

<ParamField path="name" type="string | number">
  The name of the radar data, used for tooltips and legends.
</ParamField>

### Axes

<ParamField path="angleAxisId" type="string | number" default="0">
  The id of the angle axis which this radar uses.
</ParamField>

<ParamField path="radiusAxisId" type="string | number" default="0">
  The id of the radius axis which this radar uses.
</ParamField>

### Appearance

<ParamField path="fill" type="string">
  The fill color of the radar polygon.
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of the radar polygon.
</ParamField>

<ParamField path="strokeWidth" type="number">
  The stroke width of the radar polygon.
</ParamField>

<ParamField path="fillOpacity" type="number">
  The opacity of the fill color, from 0 to 1.
</ParamField>

### Dots

<ParamField path="dot" type="boolean | object | ReactElement | function" default="false">
  Renders a circle element at each data point.

  Options:

  * `false`: no dots are drawn
  * `true`: renders dots with default settings
  * `object`: props merged with internal calculated props of each dot
  * `ReactElement`: custom dot element
  * `function`: render function for custom dot
</ParamField>

<ParamField path="activeDot" type="boolean | object | ReactElement | function" default="true">
  The dot element displayed when a data point is active (hovered/focused).

  Same options as the `dot` prop.
</ParamField>

### Labels

<ParamField path="label" type="boolean | object | ReactElement | function" default="false">
  Renders one label for each point.

  Options:

  * `true`: renders default labels
  * `false`: no labels are rendered
  * `object`: props for LabelList component
  * `ReactElement`: custom label element
  * `function`: render function for custom label
</ParamField>

### Behavior

<ParamField path="hide" type="boolean" default="false">
  If true, the radar will not be rendered.

  Hidden elements are still visible in the legend.
</ParamField>

<ParamField path="connectNulls" type="boolean">
  If true, connects data points across null values in the data.
</ParamField>

### Custom shape

<ParamField path="shape" type="ReactElement | function">
  Custom shape for the radar polygon.

  Can be a React element or a function that receives radar props and returns a React element.
</ParamField>

### Animation

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="auto">
  If false, animation will be disabled.

  If "auto", animation is disabled in SSR and respects the user's prefers-reduced-motion preference.
</ParamField>

<ParamField path="animationBegin" type="number" default="0">
  Specifies when the animation should begin, in milliseconds.
</ParamField>

<ParamField path="animationDuration" type="number" default="1500">
  Specifies the duration of animation, in milliseconds.
</ParamField>

<ParamField path="animationEasing" type="string" default="ease">
  The type of easing function.

  Options: 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'
</ParamField>

<ParamField path="onAnimationStart" type="function">
  Callback fired when animation starts.
</ParamField>

<ParamField path="onAnimationEnd" type="function">
  Callback fired when animation ends.
</ParamField>

### Display

<ParamField path="legendType" type="LegendType" default="rect">
  The type of icon in the legend.

  Options: 'line', 'plainline', 'square', 'rect', 'circle', 'cross', 'diamond', 'star', 'triangle', 'wye', 'none'
</ParamField>

<ParamField path="tooltipType" type="TooltipType">
  Valid tooltip types for this graphical item.
</ParamField>

<ParamField path="zIndex" type="number" default="100">
  The z-index of the radar polygon.

  Higher values render on top of lower values.
</ParamField>

### Interaction

<ParamField path="onMouseEnter" type="function">
  Event handler for mouse enter events on the radar polygon.

  Signature: `(props: InternalRadarProps, e: React.MouseEvent) => void`
</ParamField>

<ParamField path="onMouseLeave" type="function">
  Event handler for mouse leave events on the radar polygon.
</ParamField>

### Other

<ParamField path="className" type="string">
  CSS class name for the radar element.
</ParamField>