data_key) and which holds the labels (name_key). You can combine categories into an Other slice and set inner_radius to turn the chart into a donut.
Basic Usage
Grouping Slices
Combine smaller categories into oneOther slice to keep a busy chart readable. Aggregation preserves the total: every row contributes either to its own slice or to Other. Choose an automatic cutoff or a list of categories to show individually.
Automatic Cutoff
aggregate_below compares each value with a fraction of the original total. With aggregate_below=0.2, slices below 20% join Other; slices exactly at 20% stay separate. Here the total is 100, so US and MX remain individual slices and IN becomes Other with a value of 10.
Selected Slices
Useaggregate_except when your app lets users choose which categories deserve their own slices. Its list matches values of name_key; all remaining rows contribute to Other. Bind the list to state so changing the selection immediately recalculates the chart.
This example starts with US=100 and Other=30. Selecting Show MX pulls MX=20 into its own slice and reduces Other to 10. Group MX combines it again, keeping the total at 130 throughout.
Choose one aggregation option per chart. An empty aggregate_except list combines all rows, and Other is omitted when no rows are combined. Aggregation accepts finite, non-negative numeric values and distinct label and value fields. An existing category named Other joins the combined bucket when one is needed. With a zero total, automatic cutoff leaves the rows unchanged.
Donut Chart
Setinner_radius to a value greater than 0 to hollow out the center. This creates a donut chart, which can feel cleaner and leaves room for a central label or statistic.
Labels
Setshow_label=True to display a label on each slice, making values readable without tooltips.
Spaced Slices
Setpadding_angle to add space between slices, visually separating each segment.
Tooltip Formatting
Usevalue_format to format tooltip values with the same pipe strings as Prefab expressions and data table columns. Percent formatting expects fractional values, so 0.42 renders as 42%.
API Reference
PieChart Parameters
list[dict] | str
required
Data as a list of dicts, or a
{{ field }} interpolation reference.str
required
The data field containing numeric values to plot as slice sizes.
str
required
The data field containing labels for each slice.
float | None
default:"None"
Combine slices below this fraction of the original total into
Other. Accepts 0 through 1; slices exactly at the cutoff stay separate. Mutually exclusive with aggregate_except.list[str] | Rx | None
default:"None"
Keep these
name_key values as individual slices and combine the remaining rows into Other. Accepts a literal list or reactive state binding. Mutually exclusive with aggregate_below.int
default:"300"
Chart height in pixels.
int
default:"0"
Inner radius in pixels. Set greater than 0 for a donut chart.
bool
default:"False"
Show a label on each slice.
int
default:"0"
Angle in degrees between slices.
bool
default:"True"
Show a legend below the chart.
bool
default:"True"
Show tooltips on hover.
str
default:"\"auto\""
Format tooltip values with an expression pipe such as
currency, currency:EUR, percent:1, or compact:0.str | None
default:"None"
Additional Tailwind CSS classes.
Protocol Reference
PieChart