Concentric bars that curve around a center, one ring per item. Use it to compare a few values against a shared maximum, such as goals reached.
Charts need Recharts. Install it once with
yarn add recharts, then import from@bolio-ui/core/charts. The package stays out of your bundle until you use a chart.
Each item has a name and a value. The longest bar marks the biggest value.
withLabels writes the value on each bar. startAngle and endAngle set the arc, so 180 to 0 is the upper half.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | one ring per item | ChartSlice[] | ChartSlice | - |
| height | height of the chart, in pixels | number | - | 300 |
| barSize | thickness of each bar, in pixels | number | - | 20 |
| withBackground | draw the empty track behind each bar | boolean | - | true |
| withLabels | write the value on each bar | boolean | - | false |
| withLegend | show the legend | boolean | - | false |
| withTooltip | show the value of a bar on hover and focus | boolean | - | true |
| startAngle | where the bars start, in degrees | number | - | 90 |
| endAngle | where the bars end, in degrees | number | - | -270 |
| valueFormatter | how a number is written | (value: number) => string | - | thousands separators, en-US |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type ChartSlice = {
name: string // shown in the legend and the tooltip
value: number // the length of the bar
color?: string // any CSS color, a theme color when missing
}
The ref points at the root div.
Name the chart with aria-label, or with aria-labelledby pointing at a heading. A named chart becomes a group. The chart can be focused. Arrow Left and Right then move through the data and show the values in the tooltip.
Bars differ by color and length, so turn on withLegend or withLabels and write the key numbers in text next to the chart.