Donut Chart

A ring chart for displaying proportional data segments.

Install

npx shadcn add @clearly/donut-chart

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

<DonutChart />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Prop	Type	Default	Description
`data`	`Array<{ name: string; value: number }>`	`—`	Segments with name and numeric value.
`config`	`ChartConfig`	`—`	Recharts color/label config keyed by segment name.
`innerRadius`	`number`	`55`	Inner hole radius in px.
`outerRadius`	`number`	`90`	Outer ring radius in px.