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

# PolarAngleAxis

> Renders the angle axis in a polar chart

Renders the angle axis in a polar chart. The PolarAngleAxis component displays the angular axis, typically showing category labels around the perimeter of the chart.

## Usage

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

<RadarChart width={500} height={500} data={data}>
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis />
  <Radar dataKey="A" />
</RadarChart>
```

## Props

### Data

<ParamField path="dataKey" type="DataKey<any>">
  The key of data displayed on this axis.

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

<ParamField path="name" type="string | number">
  The name of the data displayed on this axis.
</ParamField>

### Axis configuration

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

  Used to reference this axis from other components.
</ParamField>

<ParamField path="type" type="'number' | 'category' | 'auto'" default="auto">
  The type of axis.

  * `category`: Treats data as distinct values. Each value is equidistant from its neighbors.
  * `number`: Treats data as continuous range. Closer values are placed closer together.
  * `auto`: Type is inferred based on the chart layout.
</ParamField>

<ParamField path="domain" type="AxisDomain">
  The domain of the axis when type is 'number'.

  Examples:

  * `['dataMin', 'dataMax']`: Auto-calculated from data
  * `[0, 'dataMax']`: Fixed minimum, auto maximum
  * `['auto', 'auto']`: Calculated with nice ticks
  * `[0, 100]`: Fixed range
  * `[(dataMin) => dataMin - 10, (dataMax) => dataMax + 10]`: Function-based
</ParamField>

<ParamField path="scale" type="ScaleType | CustomScaleDefinition" default="auto">
  The scale function for mapping data values to coordinates.

  Can be 'auto', a d3 scale type string, or a custom scale definition.
</ParamField>

### Position (standalone mode)

These props are only used when rendered outside a chart context.

<ParamField path="cx" type="number">
  The x-coordinate of the center.
</ParamField>

<ParamField path="cy" type="number">
  The y-coordinate of the center.
</ParamField>

<ParamField path="radius" type="number | string">
  The outer radius of the axis circle.
</ParamField>

### Ticks

<ParamField path="tick" type="boolean | object | ReactElement | function" default="true">
  Controls how individual tick labels are rendered.

  Options:

  * `false`: No tick labels
  * `true`: Default tick labels
  * `object`: Props merged with calculated tick props
  * `ReactElement`: Custom tick element
  * `function`: Render function for custom ticks
</ParamField>

<ParamField path="ticks" type="TickItem[]">
  Custom array of tick values and angles.

  If specified, overrides automatic tick generation.
</ParamField>

<ParamField path="tickCount" type="number">
  The number of ticks to display.

  Not used when type is 'category'.
</ParamField>

<ParamField path="tickFormatter" type="function">
  Function to format tick values.

  Signature: `(value: any, index: number) => string`
</ParamField>

<ParamField path="tickSize" type="number" default="8">
  The length of tick lines, in pixels.
</ParamField>

<ParamField path="niceTicks" type="NiceTicksAlgorithm" default="auto">
  Controls how Recharts calculates "nice" tick values.

  Options: 'none', 'auto', 'adaptive', 'snap125'
</ParamField>

### Axis line

<ParamField path="axisLine" type="boolean | object" default="true">
  Controls the axis line element.

  Options:

  * `false`: No axis line
  * `true`: Default axis line
  * `object`: Props for the SVG line element

  Also see `axisLineType` to change the shape.
</ParamField>

<ParamField path="axisLineType" type="'polygon' | 'circle'" default="polygon">
  The shape of the axis line.

  * `polygon`: Draws a polygon connecting tick positions
  * `circle`: Draws a circle at the axis radius
</ParamField>

### Appearance

<ParamField path="orientation" type="'inner' | 'outer'" default="outer">
  The orientation of axis text and ticks.

  * `outer`: Ticks point outward, labels outside the chart
  * `inner`: Ticks point inward, labels inside the chart
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of the axis line and ticks.
</ParamField>

<ParamField path="strokeWidth" type="number">
  The stroke width of the axis line and ticks.
</ParamField>

### Behavior

<ParamField path="allowDecimals" type="boolean" default="false">
  Whether to allow decimal values in ticks.
</ParamField>

<ParamField path="allowDuplicatedCategory" type="boolean" default="true">
  Whether to allow duplicated categories when type is 'category'.
</ParamField>

<ParamField path="reversed" type="boolean">
  If true, reverses the direction of the axis.
</ParamField>

### Display

<ParamField path="zIndex" type="number" default="500">
  The z-index of the axis.

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

### Interaction

<ParamField path="onClick" type="function">
  Event handler for click events on axis ticks.

  Signature: `(data: TickItem, index: number, e: React.MouseEvent) => void`
</ParamField>

<ParamField path="onMouseEnter" type="function">
  Event handler for mouse enter events on ticks.
</ParamField>

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

### Other

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