CHARTS

PieChart

Proportional categorical data with accessible labels, optional donut mode, and a centered summary. Every example reads from a typed Signal and adapts its chart and legend to the available width.

PART TO WHOLE

Keep the total nearby

Use centerLabel and centerValue when the chart is a summary, not just a breakdown.

PIE DATA

Show the share of a whole

PieChart reads label and value from one typed Signal. The square viewport stays centered, while a side legend moves below the chart when the available width is narrow. Android uses a high-contrast surface badge for centerLabel and centerValue so summaries stay readable over the slices.

Loading
No data available
dowe
type ChartSlice
  label:string
  value:number
signal mix type:ChartSlice[] value:[{ label:"Direct" value:46 }]

PieChart data:mix variant:"soft" scheme:"surface" size:"lg" palette:"ocean" legendPosition:"right" startAngle:-90 padAngle:3 showGlow:true

RESPONSIVE SIGNALS

The same Signal, every target

Web, iOS, and Android observe the same data path. When the Signal changes, slices, totals, center values, and legends recalculate together.

Loading
No data available
Loading
No data available
dowe
PieChart data:mix palette:"ocean" legendPosition:"right" hidePercentages:true
PieChart data:delivery palette:"forest" legendPosition:"bottom" hideValues:true

DONUT MODE

Make a centered KPI from distribution data

donut creates an open center. donutWidth controls the ring weight, while hideLabels and hideValues let the center and legend carry the explanation.

Loading
No data available
Loading
No data available
dowe
PieChart data:delivery variant:"outlined" scheme:"success" size:"lg" palette:"forest" donut:true donutWidth:72 centerLabel:"On time" centerValue:"74%" startAngle:-90 padAngle:4 hideLabels:true hideValues:true legendPosition:"bottom"
PieChart data:mix variant:"solid" scheme:"surface" palette:"sunset" donut:true donutWidth:54 centerLabel:"Traffic" centerValue:"100%" hideLabels:true hidePercentages:true hideLegend:true legendPosition:"none"

STATES AND LABELS

Choose the smallest complete explanation

Hide labels only when the legend or nearby copy names the slices. Empty and loading states remain explicit and portable.

Loading
No data available
Loading
No data available
Loading
No distribution yet
dowe
PieChart data:mix variant:"solid" scheme:"surface" hideLabels:true hideValues:true hidePercentages:true legendPosition:"bottom"
PieChart data:emptySlices variant:"outlined" scheme:"warning" emptyLabel:"No distribution yet"

API

Props

PieChart also accepts applicable common identity, spacing, sizing, visibility, radius, border, and accessibility props.

Prop
Type
Default

No data

There are no records to display