DonutChart
A donut / ring chart — Attio's Reports breakdown reports.
Attio's breakdown report: a segmented ring with a centred total and a legend of coloured swatches, labels, and values. Pure SVG ring using the r=15.915 (circumference 100) trick, so slices are just percentages. Renders role="img" with a summary.
Preview
Companies by category Companies
17companies
Search8Ads4Cloud3Fintech2
Usage
import { DonutChart } from "crisp";
<DonutChart
data={[
{ label: "Search", value: 8 },
{ label: "Ads", value: 4 },
{ label: "Cloud", value: 3 },
]}
centerCaption="companies"
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
data | { label, value, color? }[] | — | One slice per entry (auto-coloured). |
size | number | 120 | Ring diameter in px. |
thickness | number | 14 | Ring thickness in px. |
centerValue | ReactNode | total | Centre big value. |
centerCaption | ReactNode | — | Small caption under the centre value. |
legend | boolean | true | Show the legend beside the ring. |
format | (n: number) => string | — | Formats slice + total values. |