PolarRadiusAxis

Renders the radius axis in a polar chart

Renders the radius axis in a polar chart. The PolarRadiusAxis component displays the radial axis, showing scale values from the center outward.

Usage

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

<RadarChart width={500} height={500} data={data}>
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis angle={90} />
  <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

radiusAxisId · string | number · default: "0"

The id of this radius 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

angle · number · default: "0"

The angle of the entire axis: the line, ticks, and labels.

Measured in degrees from the positive x-axis.

orientation · 'left' | 'right' | 'middle' · default: "right"

The orientation of tick labels.

• left: Labels on the left side of the axis line
• right: Labels on the right side of the axis line
• middle: Labels centered on the axis line

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.

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

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 with default props
• object: Props for the SVG line element

Appearance

stroke · string

The stroke color of the axis line and labels.

strokeWidth · number

The stroke width of the axis line.

Behavior

allowDecimals · boolean · default: "false"

Whether to allow decimal values in ticks.

allowDuplicatedCategory · boolean

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

allowDataOverflow · boolean

If true, allows data to extend beyond the specified domain.

reversed · boolean

If true, reverses the direction of the axis.

includeHidden · boolean

If true, includes hidden graphical items when calculating the domain.

Label

label · string | number | ReactElement | function

The label for the axis.

Can be a string, number, React element, or render function.

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: any, 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.