PolarGrid

Renders grid lines in a polar chart

Renders grid lines in a polar chart. The PolarGrid component displays concentric circles or polygons and radial lines to help visualize the scale.

Usage

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

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

Props

Grid type

gridType · 'polygon' | 'circle' · default: "polygon"

The type of polar grids.

• polygon: renders concentric polygons
• circle: renders concentric circles

Axes

angleAxisId · string | number · default: "0"

The id of the angle axis that this grid uses.

radiusAxisId · string | number · default: "0"

The id of the radius axis that this grid uses.

Custom grid values

polarAngles · number[]

The array of angles for each radial line grid, in degrees.

When used inside a chart context, this is calculated automatically and this prop is ignored.

polarRadius · number[]

The array of radii for each concentric circle/polygon grid.

When used inside a chart context, this is calculated automatically and this prop is ignored.

Position (standalone mode)

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

cx · number

The x-coordinate of the center.

Calculated automatically inside a chart context.

cy · number

The y-coordinate of the center.

Calculated automatically inside a chart context.

innerRadius · number

The radius of the inner polar grid.

Calculated automatically inside a chart context.

outerRadius · number

The radius of the outer polar grid.

Calculated automatically inside a chart context.

Appearance

radialLines · boolean · default: "true"

If true, radial lines are drawn from the center to the edge.

stroke · string · default: "#ccc"

The stroke color of the grid lines.

fill · string

The fill color of the background.

If specified, a filled background is rendered behind the grid.

strokeWidth · number

The stroke width of the grid lines.

strokeDasharray · string

The pattern of dashes and gaps for the grid lines.

Example: “3 3” creates a dashed line.

Display

zIndex · number · default: "-100"

The z-index of the grid.

Negative values render behind most other elements.

Other

className · string

CSS class name for the polar grid element.