Dowe

CHARTS

PieChart

Proportional categorical data with accessible labels, optional donut mode, and a centered summary.

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. Keep the legend visible when neighboring slices use similar proportions.

No data available

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

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.

No data available

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.

No data available

No distribution yet

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