The Polar Bar chart component displays data in a circular layout where each bar extends radially from the center.
Unlike radial bar charts, which vary both angle and length, polar bar charts use
equal angular spacing for each category (defined by indexBy) and rely on bar length
to represent values, making them perfect for visualizing cyclical patterns like seasons,
compass directions, or time-based data.
Chart data.
'id'Key to use to index the data.
'value']Keys to use to determine each series.
Optional formatter for values.
Chart width.
Chart height.
Chart margin.
0Start angle (in degrees).
360End angle (in degrees).
0Donut if greater than 0. Value should be between 0~1 as it's a ratio from outer radius.
0Rounded arc corners.
Define style for common elements such as labels, axes…
Define chart's colors.
0Shape border width.
Method to compute border color.
trueEnable radial grid (rays)
trueEnable circular grid (rings)
radialAxisStart axis configuration.
radialAxisEnd axis configuration.
circularAxisInner axis configuration.
circularAxisOuter axis configuration.
'grid', 'arcs', 'axes', 'labels', 'legends']Defines the order of layers and add custom layers.
trueEnable/disable interactivity.
Override default tooltip.
Override default tooltip.
onClick handler.
onMouseEnter handler.
onMouseMove handler.
onMouseLeave handler.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.
Can be used to get the computed legend data.
Main element role attribute.
Main element aria-label.
Main element aria-labelledby.
Main element aria-describedby.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.
'outerRadius'Define how transitions behave when elements enter/leave.