Donut chart

The parts of one whole as a ring, five at most (more fold into Other), the total in the middle and a legend with each value and share.

ui.donut-chartcomponents/ui/donut-chart.tsx

Use case

For the AI

Use it when the share of a whole is the point: sales by category, orders by channel, time by kind of work. Hovering a segment or its legend row puts that part in the middle and quiets the others; the legend already prints every value and share, so nothing depends on hovering or on colour (chart-card.breakdown).

Use it when

Sales by category or channel
Where the time or the money went, in five parts or fewer

Use something else when

More than five parts that all matter: Bar list
The parts of each period over time: Bar chart
Progress toward one goal: Progress ring

Examples

$127.2KTotal

Custom furniture$49.6K 39 %
Counters$32.8K 26 %
Repairs$19.6K 15 %
Installation$14.4K 11 %
Other$10.8K 8 %

Code

Import

import { DonutChart } from "@/components/ui/donut-chart"

Usage

<DonutChart parts={categories} format={moneyShort} totalLabel="Total" otherLabel="Autres" aria-label="Ventes par catégorie" />

Rules

Five parts at most; the rest fold into Other (otherLabel in the client's language).
Parts of one whole only: they must add up to the total in the middle.
The legend is always there, with value and share.
Colours come from the series order (SERIES in components/ui/chart.tsx: blue, orange, aqua, yellow, magenta), never chosen by hand; a sixth series folds into Other. Colour follows what a series is, so the same series keeps its colour when a filter removes another.