Pie Chart
Pie Chart visualizes part-to-whole relationships with segment labels, legends, and overview panels in multiple layout types.
'use client'; import { PieChartPanel } from 'sdaia-ui'; export default function PieChartPanelRealWorld() {Installation
npx sdaia-ui@latest add pie-chart
Usage
import { PieChart } from "@/components/ui/pie-chart"<PieChart type="compact-panel" />Examples
Compact Panel
A small pie chart with a condensed information panel.
<PieChartPanel variant="CompactPanel" title="Title" note="This is a note" series={[Overview Panel
Pie chart with a detailed overview panel showing totals and segments.
<PieChartPanel variant="OverviewPanel" title="Title" note="This is a note" indicatorName="Indicator Name"Legend Block
Pie chart with a legend block listing all data categories and values.
<PieChartPanel variant="LegendBlock" title="Title" indicatorName="Indicator Name" indicatorValue="422.61"Breakdown Panel
Pie chart with a full breakdown panel showing each segment percentage.
<PieChartPanel variant="BreakdownPanel" title="Title" indicatorName="Indicator Name" indicatorValue="422.61"API Reference
PieChartPanelProps
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 |