PolarBar

@nivo/polar-barradial
svg

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.

Actions Logs
Start interacting with the chart to log actions
Base
PolarBarDatum[]required

Chart data.

string | (datum: RawDatum): string | numberoptionaldefault:'id'

Key to use to index the data.

string[]optionaldefault:['value']

Keys to use to determine each series.

string | (value: number) => stringoptional
open editor

Optional formatter for values.

numberrequired

Chart width.

numberrequired

Chart height.

objectoptional
px
px
px
px

Chart margin.

numberoptionaldefault:0
°

Start angle (in degrees).

numberoptionaldefault:360
°

End angle (in degrees).

numberoptionaldefault:0

Donut if greater than 0. Value should be between 0~1 as it's a ratio from outer radius.

numberoptionaldefault:0
px

Rounded arc corners.

Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Nivo

Define chart's colors.

numberoptionaldefault:0
px

Shape border width.

string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
theme property
background

Method to compute border color.

Grid & Axes
booleanoptionaldefault:true
   

Enable radial grid (rays)

booleanoptionaldefault:true
   

Enable circular grid (rings)

objectoptional

radialAxisStart axis configuration.

objectoptional

radialAxisEnd axis configuration.

objectoptional

circularAxisInner axis configuration.

objectoptional

circularAxisOuter axis configuration.

Customization
PolarBarLayerId[]optionaldefault:['grid', 'arcs', 'axes', 'labels', 'legends']

Defines the order of layers and add custom layers.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

PolarBarTooltipComponentoptional

Override default tooltip.

PolarBarTooltipComponentoptional

Override default tooltip.

(arc: PolarBarComputedDatum, event: MouseEvent) => voidoptional

onClick handler.

(arc: PolarBarComputedDatum, event: MouseEvent) => voidoptional

onMouseEnter handler.

(arc: PolarBarComputedDatum, event: MouseEvent) => voidoptional

onMouseMove handler.

(arc: PolarBarComputedDatum, event: MouseEvent) => voidoptional

onMouseLeave handler.

Legends
LegendProps[]optional

Optional chart's legends.

add legend
legend[0]: bottom, rowremove
stringoptional
bottom

Defines legend anchor relative to chart's viewport.

'column' | 'row'optional

Legend direction, must be one of 'column', 'row'.

booleanoptional
   

Justify symbol and label.

numberoptional
px

Legend block x translation.

numberoptional
px

Legend block y translation.

numberrequired
px

Legend item width.

numberrequired
px

Legend item height.

numberoptional
px

Spacing between each item.

numberoptional
px

Item symbol size.

stringoptional
left-to-right

Item layout direction.

(data: PolarBarLegendDatum[]) => voidoptional

Can be used to get the computed legend data.

Accessibility
stringoptional

Main element role attribute.

stringoptional

Main element aria-label.

stringoptional

Main element aria-labelledby.

stringoptional

Main element aria-describedby.

Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

string | objectoptionaldefault:'gentle'
wobbly

Motion config for react-spring, either a preset or a custom configuration.

stringoptionaldefault:'innerRadius'
outerRadius

Define how transitions behave when elements enter/leave.