Donut Chart
NEWA hand-written SVG donut and half-ring gauge with animated arcs, a live center readout, hover highlighting, and a legend that filters slices without collapsing the ring.
Spend by service
This billing period
Total spend
$0
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/donut-chart
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| data | DonutDatum[] | — | Slices with a label, numeric value, and optional color |
| variant | "donut" | "semi" | "donut" | Renders a full ring or a half-ring gauge |
| size | number | 240 | Largest diameter in pixels; the chart shrinks to fit narrow containers |
| thickness | number | 16 | Stroke width of the ring in pixels |
| centerLabel | string | "Total" | Caption shown above the total in the center |
| formatValue | (n: number) => string | Intl.NumberFormat | Formats center values, slice values, and tooltips |
| showLegend | boolean | true | Shows the interactive slice legend |
| animated | boolean | true | Enables intro and value animations (disabled for reduced motion) |
| ariaLabel | string | auto-generated | Accessible description for the chart image role |
| className | string | "" | Additional CSS classes for the chart wrapper |