Donut Chart shows proportional data in a ring layout with multiple panel types for labeled, stacked, and inline progress visualizations.
Loading demo: donut-chart-real-world
npx sdaia-ui@latest add donut-chart
import { DonutChart } from "@/components/ui/donut-chart"<DonutChart type="labeled-ring" />Donut chart with labels placed around each segment.
Loading demo: donut-chart-labeled-ring
Donut chart with a central metric displayed inside the ring.
Loading demo: donut-chart-metric-ring-panel
Donut chart with an extended panel showing additional metric details.
Loading demo: donut-chart-extended-metric-panel
Props for the DonutChart component.
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'Color Border' | 'Color Filled' | 'Color Border' | optional |
pie | boolean | false | optional |
percentage | number | 50 | optional |
slices | 2 | 3 | 4 | 5 | 6 | 3 | optional |
sliceData | DonutChartSliceData[] | - | optional |
helperText | string | 'Text' | optional |
label | string | - | optional |
size | number | 176 | optional |
segmentGap | number | 3 | optional |
rtl | boolean | false | optional |
series | DonutChartSeriesItem[] | — | optional |