Pie Chart
An interactive pie chart with gesture responder, slice callouts, and smooth animations.
// SYSTEM.STAGE
Installation
Install the component and its peer dependencies automatically via the CLI:
// SYS.USAGE
Drop this code into your screen or view:
1import PieChart from "@/components/pie-chart";2 3export default function AnalyticsScreen() {4 const data = [5 { label: "Category A", value: 40 },6 { label: "Category B", value: 25 },7 { label: "Category C", value: 20 },8 { label: "Category D", value: 15 },9 ];10 11 return (12 <PieChart13 data={data}14 theme="dark"15 variant="brand"16 size={250}17 explosionDistance={10}18 animated={true}19 title="Distribution"20 subtitle="Interactive breakdown"21 onSelectSlice={(slice, index) => {22 console.log("Selected slice:", slice?.label, "value:", slice?.value);23 }}24 />25 );26}// SPEC.PROPS_API
Configurable interfaces for <PieChart />
| PROP_IDENTIFIER | TYPE_SIGNATURE | DEFAULT_VAL | TELEMETRY_NOTES |
|---|---|---|---|
| data | PieDataPoint[] | DEFAULT_PIE_DATA | Array of category data points with label, numerical value, and optional custom slice colors. |
| theme | "dark" | "light" | "dark" | Color theme mode for card surface, borders, and slice palette. |
| variant | "brand" | "monochrome" | "brand" | Visual variant: brand emerald/indigo/amber/sky accents, or sleek monochrome slate/zinc shades. |
| size | number | 250 | Diameter in points of the SVG pie chart visualization. Automatically scales down on narrow viewports. |
| padAngle | number | 0 | Angular gap in degrees between adjacent slices (defaults to 0 for a seamless continuous pie). |
| explosionDistance | number | 10 | Distance in pixels by which the active slice explodes outward along its radial bisector. |
| title | string | "Distribution" | Card header title. |
| subtitle | string | "Interactive breakdown" | Card header context subtitle. |
| numberFontFamily | string | monospace (JetBrains Mono / Menlo) | Custom font family for the header rolling numbers and counters. |
| startAngleOffset | number | 270 | Starting rotation offset in degrees (270 = 12 o'clock top). |
| animated | boolean | true | Whether to animate slice circular entrance and hover transitions. |
| loading | boolean | false | Whether the chart is in a loading state with a circular loading spinner ring. |
| centerLabel | string | "Total" | Label displayed in header readout when no slice is selected. |
| initialIndex | number | null | null | Optional initial active slice index on mount. |
| onSelectSlice | (slice: PieDataPoint | null, index: number | null) => void | undefined | Callback fired when a slice is clicked, tapped, or hovered. |
Array of category data points with label, numerical value, and optional custom slice colors.
DEFAULT_PIE_DATAColor theme mode for card surface, borders, and slice palette.
"dark"Visual variant: brand emerald/indigo/amber/sky accents, or sleek monochrome slate/zinc shades.
"brand"Diameter in points of the SVG pie chart visualization. Automatically scales down on narrow viewports.
250Angular gap in degrees between adjacent slices (defaults to 0 for a seamless continuous pie).
0Distance in pixels by which the active slice explodes outward along its radial bisector.
10Card header title.
"Distribution"Card header context subtitle.
"Interactive breakdown"Custom font family for the header rolling numbers and counters.
monospace (JetBrains Mono / Menlo)Starting rotation offset in degrees (270 = 12 o'clock top).
270Whether to animate slice circular entrance and hover transitions.
trueWhether the chart is in a loading state with a circular loading spinner ring.
falseLabel displayed in header readout when no slice is selected.
"Total"Optional initial active slice index on mount.
nullCallback fired when a slice is clicked, tapped, or hovered.
undefined// PERFORMANCE_&_A11Y
Native touch gestures, screen reader attributes, and 60–120 FPS frame budgets: