Charts
RadialChart
Values on an arc — a gauge, or a few totals against one scale.
When to reach for it
A single value against a fixed total. Past about four bars a BarChart is the honest choice, because a radial bar’s radius is not its value.
Examples
default
| tier | Value |
|---|---|
| documents | 72 |
| photos | 54 |
| backups | 31 |
gauge
| tier | Value |
|---|---|
| used | 62 |
loading
Notes
Values on an arc — a gauge, or a small set of totals against one scale.
The caveat worth knowing before reaching for it: a radial bar's LENGTH is its value, but its RADIUS is not, so an inner bar and an outer bar of the same value are drawn different lengths. That makes it a poor comparison and a good single-value gauge; past about four bars, a <BarChart> is the honest choice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The composed parts — axes, grid, tooltip, legend, and the marks themselves. | |
| configrequired | ChartConfig | Bar names → their label and paint. Keys must match the `nameKey` values. | |
| datarequired | TData[] | The rows the chart draws. One entry per point, bar or category. | |
| nameKeyrequired | keyof TData & string | The row field naming each bar. | |
| titlerequired | string | What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed. | |
| chartProps | ComponentProps<typeof RechartsRadialBarChart> | Escape hatch onto the raw Recharts chart element. | |
| className | string | Merged onto the figure, last, so a call site can size or space it. | |
| defaultSelectedBar | string | null | null | The bar lit on first render. |
| description | ReactNode | A line under the title — the unit, the window, the caveat. | |
| hideDataTable | boolean | false | Drops the hidden table view. Only correct when the page prints the data itself. |
| innerRadius | number | string | '30%' | Where the arc starts, from the centre. |
| isLoading | boolean | false | Swaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands. |
| max | number | What a full sweep is worth. Without it the scale comes from the data, so the largest bar always fills the arc — which is right for a comparison and wrong for a gauge. Set it (typically 100) whenever a single value has to read against a fixed total, or "62%" and "98%" will look identical. | |
| onSelectionChange | (selection: { name: string; value: number } | null) => void | Fires when the selection changes, and with null when it is cleared. | |
| outerRadius | number | string | '100%' | Where the arc ends. |
| showTitle | boolean | Prints the title above the plot instead of hiding it from sight. | |
| valueKey | keyof TData & string | The row field holding each bar's number. Used by the table view. | |
| variant | RadialVariant | 'full' | The arc shape — a full ring, or the half circle a gauge wants. |
Types
export type RadialVariant = 'full' | 'semi'Accessibility
- title is required; pass valueKey and the rows are also rendered as a visually hidden table.
- Set max or the scale comes from the data and the largest bar always fills the arc — which makes 62% and 98% look identical.
- showTrack draws the unfilled remainder, which is what makes a gauge readable at all.