Donut Chart

ui

Allocation as a ring rather than a pie: the stroke is a band around an open centre that the total sits in. Slices sort descending, ring and legend cross-highlight, and square caps keep the gaps between slices real.

pnpm dlx shadcn@latest add "https://ui.ssych.com/r/donut-chart.json"

Sign In

Donut Chart

ui

Allocation as a ring rather than a pie: the stroke is a band around an open centre that the total sits in. Slices sort descending, ring and legend cross-highlight, and square caps keep the gaps between slices real.

pnpm dlx shadcn@latest add "https://ui.ssych.com/r/donut-chart.json"

components/ui/donut-chart.tsx