Pie and donut charts: the share of each part in a whole, with center content, rounded gaps, rose slices, plot labels, and small-slice grouping.
Introduction
ChartPie shows the share of each part in a whole, as a pie or a donut. Slices come from data; compose it with ChartLegend and ChartTooltip. Shared parts, colors, and accessibility are in Chart.
When to use: A few parts of one whole — budget by category, invoices by status.
Compared to similar components:
- ChartBar — Many categories, or exact comparisons between them.
- ChartFunnel — Ordered stages where each one is a subset of the previous.
Use the framework selector in the site header to switch between React and Vue.
Import
import { ChartPie } from "@bridge-ui/vue/Components/ChartPie";import { ChartPie } from "@bridge-ui/react/Components/ChartPie";Add ChartAxis, ChartLegend, and ChartTooltip from Chart.
Basic usage
Pass the slices as data, each with a label and a value. Non-positive values are skipped. Shares are whole percents that always sum to 100.
Donut and center content
variant="donut" leaves a hole for the center slot (React: slots.center; Vue: #center). thickness sets the ring width as a fraction of the radius (default 0.3).
Gaps, corners, and rose
padAngle sets the gap between slices (deg) and cornerRadius rounds the slice corners (px). A pie is solid by default; a donut gets padAngle={1} and cornerRadius={2}.
rose draws a Nightingale pie: each slice gets a radius that shows its value. With radius the angle still shows the share; with area every slice gets the same angle and only the radius changes. rose works with variant="donut", and the tooltip, legend, and data table still show each slice’s share of the total.
Labels
labels turns slice labels on the plot on, and labelPosition places them (outside by default, or inside). labelContent is label, value, percent, or a function that receives { label, value, percent }. The legend comes from ChartLegend; use plot labels, the legend, or both.
Slice colors and grouping
Pass a token key or any CSS color as color on a slice to override the palette. maxSlices keeps the largest slices and groups the rest into “Other”. minAngle sets the minimum slice angle (default 2 degrees) so tiny slices stay visible.
Legend entries hide and show slices, and the shares are recomputed for the visible slices. The data table keeps the shares of all data.
Keyboard and accessibility
Arrow keys move between slices, and each slice is announced with its share. The root generates a summary that lists the slices with their shares. See Chart for the shared behavior.
Related components
API
ChartPie
Shared root props (height, palette, loading, summary, …) are listed in Chart.
| Prop | Type | Default | Description |
|---|---|---|---|
| cornerRadius | number | 0 (2 for donut) | Slice corner radius (px). Vue: corner-radius. |
| data | { label, value, color? }[] | — | Required. Slices in order. |
| labelContent | "label" | "value" | "percent" | ((item) => string) | "label" | What plot labels show. Vue: label-content. |
| labelPosition | "inside" | "outside" | "outside" | Where plot labels sit. Vue: label-position. |
| labels | boolean | false | Slice labels on the plot. |
| maxSlices | number | — | Keeps the largest slices and groups the rest into “Other”. Vue: max-slices. |
| minAngle | number | 2 | Minimum slice angle (deg). Vue: min-angle. |
| padAngle | number | 0 (1 for donut) | Gap between slices (deg). Vue: pad-angle. |
| rose | "radius" | "area" | — | Nightingale pie: the slice radius shows the value. |
| slots | ChartPieSlots | — | center (inside the donut hole), empty, and loading. Vue: #center, #empty, and #loading. |
| thickness | number | 0.3 | Donut ring thickness (fraction of the radius). |
| variant | "pie" | "donut" | "pie" | donut leaves a hole for the center slot. |