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

import { RadarChart, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';

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

Props

Data

dataKey · DataKey<any>

The key of data displayed on this axis.

Can be a string, number, function, or array path.

name · string | number

The name of the data displayed on this axis.

Axis configuration

angleAxisId · string | number · default: "0"

The id of this angle axis.

Used to reference this axis from other components.

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.

domain · 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

scale · 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.

Position (standalone mode)

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

cx · number

The x-coordinate of the center.

cy · number

The y-coordinate of the center.

radius · number | string

The outer radius of the axis circle.

Ticks

tick · 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

ticks · TickItem[]

Custom array of tick values and angles.

If specified, overrides automatic tick generation.

tickCount · number

The number of ticks to display.

Not used when type is ‘category’.

tickFormatter · function

Function to format tick values.

Signature: (value: any, index: number) => string

tickSize · number · default: "8"

The length of tick lines, in pixels.

niceTicks · NiceTicksAlgorithm · default: "auto"

Controls how Recharts calculates “nice” tick values.

Options: ‘none’, ‘auto’, ‘adaptive’, ‘snap125’

Axis line

axisLine · 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.

axisLineType · '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

Appearance

orientation · '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

stroke · string

The stroke color of the axis line and ticks.

strokeWidth · number

The stroke width of the axis line and ticks.

Behavior

allowDecimals · boolean · default: "false"

Whether to allow decimal values in ticks.

allowDuplicatedCategory · boolean · default: "true"

Whether to allow duplicated categories when type is ‘category’.

reversed · boolean

If true, reverses the direction of the axis.

Display

zIndex · number · default: "500"

The z-index of the axis.

Higher values render on top of lower values.

Interaction

onClick · function

Event handler for click events on axis ticks.

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

onMouseEnter · function

Event handler for mouse enter events on ticks.

onMouseLeave · function

Event handler for mouse leave events on ticks.

Other

className · string

CSS class name for the axis element.