Pie Chart visualizes part-to-whole relationships with segment labels, legends, and overview panels in multiple layout types.
Loading demo: pie-chart-real-world
npx sdaia-ui@latest add pie-chart
import { PieChart } from "@/components/ui/pie-chart"<PieChart type="compact-panel" />A small pie chart with a condensed information panel.
Loading demo: pie-chart-compact-panel
Pie chart with a detailed overview panel showing totals and segments.
Loading demo: pie-chart-overview-panel
Pie chart with a legend block listing all data categories and values.
Loading demo: pie-chart-legend-block
Pie chart with a full breakdown panel showing each segment percentage.
Loading demo: pie-chart-breakdown-panel
Props for the PieChartPanel component.
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'SummaryView' | 'IndicatorView' | 'HeroView' | 'BreakdownPanel' | 'Comparison... | 'SummaryView' | optional |
title | string | 'Title' | optional |
note | string | 'This is a note' | optional |
indicatorName | string | 'Indicator Name' | optional |
indicatorValue | string | '422.61' | optional |
badgeValue | string | '12%' | optional |
badgeDirection | 'up' | 'down' | 'up' | optional |
dateBadge | string | '26/02/2026' | optional |
optionsLabel | string | 'Options' | optional |
series | PieChartPanelItem[] | - | optional |
tabs | PieChartPanelTab[] | - | optional |
onTabChange | (index: number) => void | - | optional |
progress | number | - | optional |
defaultProgress | number | 0 | optional |
currentTime | string | '0:00' | optional |
duration | string | '0:00' | optional |
onProgressChange | (value: number) => void | - | optional |
rtl | boolean | false | optional |
menuOptions | string[] | — | optional |
activeOption | string | — | optional |
onOptionSelect | (option: string) => void | — | optional |