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.

​
API Reference

PieChart Parameters

​
data
list[dict] | str
required
Data as a list of dicts, or a {{ field }} interpolation reference.
​
data_key
str
required
The data field containing numeric values to plot as slice sizes.
​
name_key
str
required
The data field containing labels for each slice.
​
height
int
default:"300"
Chart height in pixels.
​
inner_radius
int
default:"0"
Inner radius in pixels. Set greater than 0 for a donut chart.
​
show_label
bool
default:"False"
Show a label on each slice.
​
padding_angle
int
default:"0"
Angle in degrees between slices.
​
show_legend
bool
default:"False"
Show a legend below the chart.
​
show_tooltip
bool
default:"True"
Show tooltips on hover.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

PieChart
{
  "type": "PieChart",
  "data": "Action[] | string (required)",
  "dataKey": "string (required)",
  "nameKey": "string (required)",
  "height?": "300",
  "innerRadius?": 0,
  "showLabel?": false,
  "paddingAngle?": 0,
  "showLegend?": false,
  "showTooltip?": true,
  "cssClass?": "string"
}
For the complete protocol schema, see PieChart.