Pie Chart

v0.2.2

Fully presentational pie/donut chart widget using Recharts. Supports custom colors, labels, semi-circles, padding angles, and responsive design.

View as Markdown

Install

npx shadcn@latest add @signalos/pie-chart

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/chart-core) are pulled automatically.

Preview

Example & code

pie-chart.example.tsx

import { PieChart } from "@/components/widgets/pie-chart/PieChart"

const data = [
  { name: "Desktop", value: 400 },
  { name: "Mobile", value: 300 },
  { name: "Tablet", value: 200 },
  { name: "Other", value: 100 },
]

export default function PieChartExample() {
  return (
    <PieChart
      data={data}
      height={400}
      innerRadius={60}
      label={{
        show: true,
        position: "inside",
        formatter: (entry) => `${Math.round(entry.percent * 100)}%`,
      }}
    />
  )
}

Props

PieChartDataPoint

Prop	Type	Default	Description
name*	`string`	-	Segment name/label
value*	`number`	-	Segment value
fill	`string \| undefined`	-	Optional custom fill color for this segment

PieChartLabelPayload

Prop	Type	Default	Description
percent*	`number`	-
name*	`string`	-	Segment name/label
value*	`number`	-	Segment value
fill	`string \| undefined`	-	Optional custom fill color for this segment

PieChartLegend

Prop	Type	Default	Description
verticalAlign	`"bottom" \| "top" \| "middle" \| undefined`	-	Legend position
align	`"left" \| "center" \| "right" \| undefined`	-
layout	`"horizontal" \| "vertical" \| undefined`	-	Legend layout
iconType	`"line" \| "plainline" \| "square" \| "rect" \| "circle" \| "cross" \| "diamond" \| "star" \| "triangle" \| "wye" \| undefined`	-	Custom icon type
formatter	`((value: string, entry: unknown, index: number) => ReactNode) \| undefined`	-	Custom legend formatter

PieChartTooltip

Prop	Type	Default	Description
formatter	`Formatter<ValueType, NameType> \| undefined`	-	Custom tooltip formatter

PieChartLabel

Prop	Type	Default	Description
show	`boolean \| undefined`	-	Show labels on segments
position	`"center" \| "inside" \| "outside" \| undefined`	-	Label position
formatter	`((entry: PieChartLabelPayload) => string) \| undefined`	-	Custom label formatter

PieChartProps

Prop	Type	Default	Description
data*	`PieChartDataPoint[]`	-	Array of data points (segments)
width	`number \| undefined`	-	Chart width in pixels
height	`number \| undefined`	-	Chart height in pixels
innerRadius	`string \| number \| undefined`	-	Inner radius for donut chart (0-100, percentage of outer radius)
outerRadius	`string \| number \| undefined`	-	Outer radius (in pixels or percentage)
startAngle	`number \| undefined`	-	Starting angle in degrees
endAngle	`number \| undefined`	-	Ending angle in degrees
paddingAngle	`number \| undefined`	-	Padding angle between segments in degrees
legend	`boolean \| PieChartLegend \| undefined`	-	Legend configuration (false to hide)
tooltip	`boolean \| PieChartTooltip \| undefined`	-	Tooltip configuration (false to hide)
label	`boolean \| PieChartLabel \| undefined`	-	Label configuration
colors	`string[] \| undefined`	-	Default colors for segments (if not specified per segment)
isLoading	`boolean \| undefined`	-	Loading state
emptyState	`ReactNode`	-	Empty state content
onSegmentClick	`((data: unknown, index: number) => void) \| undefined`	-	Click handler for pie segments
responsive	`boolean \| undefined`	-	Responsive container (auto-sizes to parent)
className	`string \| undefined`	-	Container className
style	`CSSProperties \| undefined`	-	Custom container styles
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the root element. The empty and loading states derive `${dataTestId}-empty` / `${dataTestId}-skeleton`.

npm dependencies

recharts@^2.15.0

Changelog

Changelog - PieChart

0.2.2

Add a data-testid passthrough on the root element, with the empty and loading states deriving ${dataTestId}-empty / ${dataTestId}-skeleton.

0.2.1

Update data-testid call sites for the renamed prop.

0.2.0

Factor shared colors, tooltip/legend config, skeleton, and empty state into the chart-core widget; public API unchanged.

0.1.1

Added PieChartLabelPayload type (includes percent) for typed label formatters.
innerRadius and outerRadius now accept string (e.g. "80%") in addition to number.
PieChartLabel.formatter now typed as (entry: PieChartLabelPayload) => string instead of any.
PieChartTooltip.formatter now uses Recharts' TooltipProps formatter type.
PieChartLegend.formatter signature updated to include index parameter.
onSegmentClick parameter type changed from PieChartDataPoint to unknown for runtime safety.
Fixed label rendering logic: label.show=false now correctly hides labels; label=true passes through to Recharts default.

0.1.0

Initial release.

Pie chart component with Recharts integration
Donut chart support via innerRadius
Semi-circle and custom angle ranges
Segment padding angles for visual separation
Custom colors per segment
Label support with customizable position and formatting
Configurable legend and tooltip
Responsive container support
Loading skeleton and empty state
Fully presentational (props-in/events-out pattern)