RadialBar

@nivo/radial-barradialbarsvgisomorphic

A radial bar chart.

Note that margin object does not take grid labels into account, so you should adjust it to leave enough room for it.

The responsive alternative of this component is ResponsiveRadialBar.

See the dedicated guide on how to setup legends for this component.

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

Chart data.

'auto' | numberoptionaldefault:'auto'

If 'auto', the max value is derived from the data, otherwise use a static value.

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

Optional formatter for values (y).

numberrequired

Chart width.

numberrequired

Chart height.

objectoptional
px
px
px
px

Chart margin.

numberoptionaldefault:0
°

Start angle (in degrees).

numberoptionaldefault:270
°

End angle (in degrees).

numberoptionaldefault:0.3

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

numberoptionaldefault:0.2

Padding between each ring (ratio).

numberoptionaldefault:0
°

Padding between each bar.

numberoptionaldefault:0
px

Rounded corners.

Style
Themeoptional

Define style for common elements such as labels, axes…

string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo

Defines how to compute colors.

numberoptionaldefault:0
px

Bars border width.

InheritedColorConfig<ComputedBar>optionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute border color.

Tracks
booleanoptionaldefault:true
   

Enable/disable tracks.

stringoptionaldefault:'rgba(0, 0, 0, .15)'
   rgba(0, 0, 0, .15)

Define tracks 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.

Labels
booleanoptionaldefault:false
   

Enable/disable labels.

string | (bar: ComputedBar) => stringoptionaldefault:'formattedValue'
formattedValue

Defines how to get label text, can be a string (used to access current bar property) or a function which will receive the actual bar data.

numberoptionaldefault:10
°

Skip label if corresponding arc's angle is lower than provided value.

numberoptionaldefault:0.5

Define the radius to use to determine the label position, starting from inner radius, this is expressed as a ratio. Centered at 0.5 by default.

string | object | Functionoptionaldefault:{"theme":"labels.text.fill"}
inheritthemecustom
theme property
labels.text.fill

Defines how to compute label text color.

Customization
(RadialBarLayerId | RadialBarCustomLayer)[]optionaldefault:['grid', 'tracks', 'bars', 'labels', 'legends']

Defines the order of layers and add custom layers.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

RadialBarTooltipComponentoptional

Override default tooltip.

(bar: ComputedBar, event: MouseEvent) => voidoptional

onClick handler.

(bar: ComputedBar, event: MouseEvent) => voidoptional

onMouseEnter handler.

(bar: ComputedBar, event: MouseEvent) => voidoptional

onMouseMove handler.

(bar: ComputedBar, event: MouseEvent) => voidoptional

onMouseLeave handler.

Legends
LegendProps[]optional

Optional chart's legends.

add legend
legend[0]: right, columnremove
stringoptional
right

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.

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'
gentle

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

stringoptionaldefault:'centerRadius'
centerRadius

Define how transitions behave.