Skip to main content
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us