Skip to main content
PieChart shows how parts relate to a whole. Unlike the other chart types, it doesn’t use series — instead you specify which data field holds the numeric values (data_key) and which holds the labels (name_key). Set inner_radius to turn it into a donut chart.

​
Basic Usage

​
Donut Chart

Set inner_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

Set show_label=True to display a label on each slice, making values readable without tooltips.

​
Spaced Slices

Set padding_angle to add space between slices, visually separating each segment.

​
Tooltip Formatting

Use value_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.
​
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:"False"
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
For the complete protocol schema, see PieChart.