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.

roll the dice
Actions Logs
Start interacting with the chart to log actions
Base
readonly 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.

number | readonly number[]optional

Define how many steps (ticks) to use for the value scale.

booleanoptionaldefault:true
   

Extends the range of values so that it starts and ends on nice round values.

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.

Ref<SVGSVGElement>optional

Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.

Style
Arc labels
Grid & Axes
Customization
Interactivity
Legends
Accessibility
Motion