Donut Chart
freeInteractive SVG donut and half-ring gauge chart with animated segments and live center readout.
#chart#donut#gauge#analytics#svg
Traffic Sources
Hover segments to inspect
10,250Total visits
CLI Installation
pnpm dlx shadcn@latest add https://ui.ibidi.dev/r/donut-chart.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| segments | DonutSegment[] | DEFAULT_SEGMENTS | Array of { label, value, color } slices. |
| title | string | 'Traffic Sources' | Card header title. |