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.
Chart data.
'auto'If 'auto', the max value is derived from the data, otherwise use a static value.
Optional formatter for values (y).
Chart width.
Chart height.
Chart margin.
0Start angle (in degrees).
270End angle (in degrees).
0.3Donut if greater than 0. Value should be between 0~1 as it's a ratio from outer radius.
0.2Padding between each ring (ratio).
0Padding between each bar.
0Rounded corners.
Define style for common elements such as labels, axes…
Define chart's colors.
0Bars border width.
Method to compute border color.
trueEnable/disable tracks.
'rgba(0, 0, 0, .15)'rgba(0, 0, 0, .15)Define tracks color.
trueEnable radial grid (rays)
trueEnable circular grid (rings)
radialAxisStart axis configuration.
radialAxisEnd axis configuration.
circularAxisInner axis configuration.
circularAxisOuter axis configuration.
falseEnable/disable labels.
'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.
10Skip label if corresponding arc's angle is lower than provided value.
0.5Define 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.
Defines how to compute label text color.
'grid', 'tracks', 'bars', 'labels', 'legends']Defines the order of layers and add custom layers.
trueEnable/disable interactivity.
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.
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.
'centerRadius'Define how transitions behave.