Pie Chart

Show proportions of a single total when slice share matters more than precise comparison.

Configure slice values, optional labels, and radii on PieChart. Arc labels and highlight behavior are controlled on the series and arc_label props — not ad-hoc CSS.

  • Market share, budget allocation, or status breakdowns with few segments (≤7).
  • Donut layouts with a center KPI when the hole can host a summary metric.
  • Highlight-on-hover when users explore slice contribution interactively.
  • Bind a Dataset with label_field and value_field, or pass inline series + category labels on x_axis.
  • Set inner_radius for donut charts; use children for centered overlay text.
  • Tune arc_label for formatted values; link to charts-label for location-aware formatters.
  • Leave skip_animation unset to honor reduced-motion; arc sweep runs on enter otherwise.
  • Wrap the chart in a native element with data-testid for E2E hooks.
Composition breakdown

Four-slice pie with formatted arc labels. min_angle hides labels on thin slices so text does not collide — start here for standard share breakdowns.

35.028.022.015.0
Donut with padding

Donut layout with inner_radius and padding_angle between slices. Use when a center KPI or icon will sit in the hole, or when thin slices need visual separation.

35.028.022.015.0
Center KPI label

Donut with centered overlay text in the hole via children. Pair with inner_radius around 50–60% so the label has room without crowding arc labels.

35.028.022.015.072%
Highlight on hover

highlight_scope fades non-hovered slices — see charts-highlighting for axis crosshair patterns on cartesian charts.

35.028.022.015.0