DonutChart
Share-of-total ring (payment methods, spend by category) with a hoverable legend showing values and percentages.
Component behavior
DonutChart displays category proportions as arcs around a center label. The legend displays each value and percentage.
- A total divided into a small number of categories.
- Category proportions at one point in time.
- Category proportions with a central summary value.
BarChart: the task requires category ranking or precise comparisons.
Meter: one value is compared with capacity.
ProgressCircle: the task requires a ring displaying one completion percentage.
AreaChart: composition must be shown over time.
FunnelChart: categories are sequential stages.
Props
DonutSegment contains label, value, and color. Percentages derive from the sum of values, including when the input values are percentages. Arcs render clockwise from twelve o’clock in array order.
| Prop | Type | Default | Description |
|---|---|---|---|
segments | DonutSegment[] | — | Arcs in draw order, clockwise from 12 o'clock. Negative values contribute zero. Labels are used as React keys, so they must be unique. |
size | number | 104 | Outer diameter in pixels. The stroke is inset, so the ring never exceeds this box. |
thickness | number | 12 | Ring stroke width in pixels. The hovered arc is drawn 2px thicker, so leave a little headroom. |
centerLabel | ReactNode | — | Primary text inside the ring. Replaced by the hovered segment's percentage while a segment is hovered. |
centerSub | ReactNode | — | Secondary text under the primary label. Replaced by the hovered segment's label on hover. |
formatValue | (segment: DonutSegment) => ReactNode | — | Formats a legend value from the segment object. Defaults to the raw value. Does not change the percentage column. |
noLegend | boolean | — | Hide the legend list (ring only). Hovering the arcs still works. |
Examples
Share of total
Hovering an arc or legend row highlights that segment and reduces other segments to 35% opacity. The center displays the hovered percentage to one decimal place. centerLabel appears when no segment is hovered.
Ring only
noLegend hides the segment list. Two segments can represent a measure and remainder. Use ProgressCircle for a single percentage.
Size and thickness
size is the outer diameter and thickness is the stroke; the radius is derived so the ring always fits its box exactly. Thin strokes on a small ring make short arcs hard to see, and the hovered arc grows 2px, so account for the extra width. The center text is not scaled with the ring, so a small size needs a short label.
Segment order
Arcs and legend entries retain input order. Sort the input to display segments in descending value order.
import { DonutChart } from "@solarius/onset";
import type { DonutSegment } from "@solarius/onset";
<DonutChart
segments={[
{ label: "Visa", value: 4500, color: "var(--m-color-primary)" },
{ label: "Mastercard", value: 3200, color: "var(--m-color-warn)" },
]}
centerLabel="$7.7K"
centerSub="Total"
/>;