A circle split into slices that show how a total divides between parts. Use it with few parts, up to five or six, where one slice is much bigger than the others.
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 slices are sized against the sum of all values.
Add withLegend to name the slices. withLabels writes a label on each one: its value, its name or its percent.
Set color on an item to override the theme color, and valueFormatter to change how a value reads.
Set startAngle and endAngle to draw only part of the circle. The chart still keeps the room of a full circle.
| 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 |
| ... | 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.