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

# RadarChart

> API reference for the RadarChart component

RadarChart renders a chart with data represented on axes starting from the same point. Useful for comparing multiple variables.

```tsx theme={null}
import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend } 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 },
];

<RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} 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 />
</RadarChart>
```

## Props

<ParamField path="data" type="array">
  The source data. Each element should be an object.
</ParamField>

<ParamField path="width" type="number | string">
  The width of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="height" type="number | string">
  The height of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="margin" type="object" default="{top: 5, right: 5, bottom: 5, left: 5}">
  Empty space around the container.

  <Expandable title="properties">
    <ParamField path="top" type="number" />

    <ParamField path="right" type="number" />

    <ParamField path="bottom" type="number" />

    <ParamField path="left" type="number" />
  </Expandable>
</ParamField>

<ParamField path="cx" type="number | string" default="50%">
  The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width.
</ParamField>

<ParamField path="cy" type="number | string" default="50%">
  The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height.
</ParamField>

<ParamField path="innerRadius" type="number | string" default="0">
  The inner radius of the chart. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius.
</ParamField>

<ParamField path="outerRadius" type="number | string" default="80%">
  The outer radius of the chart. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius.
</ParamField>

<ParamField path="startAngle" type="number" default="90">
  Angle in degrees from which the chart should start.
</ParamField>

<ParamField path="endAngle" type="number" default="-270">
  Angle, in degrees, at which the chart should end.
</ParamField>

<ParamField path="layout" type="'centric' | 'radial'" default="centric">
  The layout of chart defines the orientation of axes, graphical items, and tooltip.
</ParamField>

<ParamField path="barCategoryGap" type="number | string" default="10%">
  The gap between two bar categories.
</ParamField>

<ParamField path="barGap" type="number | string" default="4">
  The gap between two bars in the same category.
</ParamField>

<ParamField path="barSize" type="number | string">
  The width or height of each bar.
</ParamField>

<ParamField path="maxBarSize" type="number">
  The maximum width of all the bars.
</ParamField>

<ParamField path="stackOffset" type="'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette' | 'positive'" default="none">
  The type of offset function used to generate the lower and upper values in the series array.
</ParamField>

<ParamField path="reverseStackOrder" type="boolean" default="false">
  If `false`, stacked items will be rendered left to right. If `true`, stacked items will be rendered right to left.
</ParamField>

<ParamField path="syncId" type="number | string">
  Charts with the same syncId will synchronize Tooltip and Brush events.
</ParamField>

<ParamField path="syncMethod" type="'index' | 'value' | function" default="index">
  Customize how the charts will synchronize tooltips and brushes.
</ParamField>

<ParamField path="accessibilityLayer" type="boolean" default="true">
  Turn on accessibility support for keyboard-only and screen reader users.
</ParamField>

<ParamField path="responsive" type="boolean" default="false">
  If true, then it will listen to container size changes and adapt the SVG chart accordingly.
</ParamField>

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

<ParamField path="style" type="CSSProperties">
  Inline CSS styles for the chart container.
</ParamField>

<ParamField path="id" type="string">
  The unique id of chart.
</ParamField>

<ParamField path="throttleDelay" type="number | 'raf'" default="'raf'">
  Decides the time interval to throttle events.
</ParamField>

<ParamField path="onClick" type="function">
  The customized event handler of click in this chart.
</ParamField>

<ParamField path="onMouseEnter" type="function">
  The customized event handler of mouseenter in this chart.
</ParamField>

<ParamField path="onMouseMove" type="function">
  The customized event handler of mousemove in this chart.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  The customized event handler of mouseleave in this chart.
</ParamField>