Donut Chart
Donut Chart shows proportional data in a ring layout with multiple panel types for labeled, stacked, and inline progress visualizations.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { DonutChartPanel } from 'sdaia-ui';5
Installation
npx sdaia-ui@latest add donut-chart
Usage
import { DonutChart } from "@/components/ui/donut-chart"<DonutChart type="labeled-ring" />Examples
Labeled Ring
Donut chart with labels placed around each segment.
Loading preview…
1
<DonutChartPanel2
variant="LabeledRing"3
title="Title"4
note="This is a note"5
donutHelperText="Text"Metric Ring Panel
Donut chart with a central metric displayed inside the ring.
Loading preview…
1
<DonutChartPanel2
variant="MetricRingPanel"3
title="Title"4
donutHelperText="Text"5
donutLabel="422.61"Extended Metric Panel
Donut chart with an extended panel showing additional metric details.
Loading preview…
1
<DonutChartPanel2
variant="ExtendedMetricPanel"3
title="Title"4
note="This is a note"5
dateBadge="26/02/2026"API Reference
DonutChartProps
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 |