A ring split into slices, with room in the center for the total. It reads like a PieChart, and the hole gives you a place for the number that matters.
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.
Same data as PieChart. Write the total in the middle with chartLabel.
thickness sets the width of the ring, in pixels.
Add withLegend to name the slices, and withLabels to write a value, name or percent on each one.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | one item per slice | ChartSlice[] | ChartSlice | - |
| size | width and height of the ring, in pixels | number | - | 220 |
| withTooltip | show the value of a slice on hover and focus | boolean | - | true |
| withLegend | show the legend below the chart | boolean | - | false |
| withLabels | write a label next to each slice | boolean | - | false |
| labelsType | what the labels say | string | 'value', 'name', 'percent' | value |
| valueFormatter | how a value is written in the labels and the tooltip | (value: number) => string | - | thousands separators, en-US |
| paddingAngle | gap between the slices, in degrees | number | - | 0 |
| startAngle | where the first slice starts, in degrees | number | - | 90 |
| endAngle | where the last slice ends, in degrees | number | - | -270 |
| thickness | width of the ring, in pixels | number | - | 24 |
| chartLabel | text or number written in the center | string / number | - | - |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type ChartSlice = {
name: string // shown in the legend, the tooltip and the name labels
value: number // the size of the slice, against the sum of all values
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 slices and show their values in the tooltip.
Color alone is a weak signal, so turn on withLegend or withLabels and write the key numbers in text next to the chart, or offer the same data in a Table.