The Pie chart type within the Chart block plots part-to-whole slices from one category field and one value field. A donut is achieved by adjusting the Slice Width setting — full produces a solid pie, while sm, md, or lg leave a hole in the center. A semi-donut is achieved by setting a custom Angle range (for example -90° to 90° for a top half-circle).
Tip: Pie: Slice Width = full. Donut: Slice Width = sm/md/lg. Semi-donut: Slice Width not full + an Angle range like -90° to 90°. All use Chart Type = Pie.
Content Properties
Property | Where to Set | Description |
|---|---|---|
data (Data Source) | Content → Data Source | The array of records to plot. |
Group by | Content → Group by | The field whose distinct values become slices. One slice per unique value. |
Series | Content → Series | Exactly one series with a Label and Value field. Mapped series mode is not offered on Pie. |
Tooltip | Content → Tooltip | Custom header and body text around the hover tooltip. |
Slots → Center | Content → Slots | A nested block rendered in the hole of the donut. Use it for a total KPI, a label, or a custom icon. |
Legends | Content → Add-ons → Legends | On by default. Legend Position: Top, Right (default), Bottom or Left. Distribute: Center (default) or Space Between. Columns: default 1. Remove the add-on to hide the legend. |
Appearance Properties
Property | Options / Default | Description |
|---|---|---|
Slice Width |
| Ring thickness preset. |
Gap | pixels; default 2 | Gap between slices in pixels. Not available when Slice Width is |
Radius | pixels; default 5 | Corner radius of each slice in pixels. Not available when Slice Width is |
Angle | Start Angle / End Angle (in Degrees); default 0° to 360° | Controls the sweep of the chart. 0° is at the top (12 o'clock) and angles run clockwise. Use -90° to 90° for a top half and 90° to 270° for a bottom half. |
Total | toggle | Shows the summed value in the center hole. Appears only when Slice Width is not |
Chart Colours | color assignment | Color per slice/group value, or conditional rules. |
styles | style set | Chart dimensions, padding, overflow, and responsive sizing. |
Events & Methods
| Event / Method | Description |
| On Data Point Click | Fires when user clicks a slice. Payload is the clicked record (all its fields). Use to filter other blocks or open detail views. |
Pie Chart Variants
Solid Pie
Set Slice Width to full. No center hole. The simplest part-to-whole chart.
Donut Chart
Set Slice Width to sm, md, or lg. A center hole opens. Use the Center slot to place a KPI, label, or icon in the hole.
Example: Donut with Total KPI
Set Chart Type = Pie, Slice Width =
md.Enable Total in Appearance to show the summed value in the center.
Or, add a custom block to the Center slot — bind a Text block to the total from your data source — for full styling control.
Semi-Donut (Gauge-Style)
Set Slice Width to any non-full value and configure the Angle:
Top half: Start -90°, End 90°
Bottom half: Start 90°, End 270°
Three-quarter (gap at the bottom): Start -135°, End 135°
Legend Configuration
Set up the legend in Content → Add-ons → Legends, which is on by default. Pie has its own legend options: four positions, a Distribute setting and a column count.
Position | Description |
|---|---|
Top | Legend renders above the chart. |
Right (default) | Legend renders to the right of the chart. |
Bottom | Legend renders below the chart. |
Left | Legend renders to the left of the chart. |
The Distribute option controls legend alignment: Center (default) centers items, Space Between spreads them across the available width. Columns (default 1) arranges the legend items into that many columns. To hide the legend, remove the Legends add-on.
Slice Order & Labels
Warning: There is no automatic sorting and no "others" bucket. Slices render in the same order as the rows in your bound data. Shape your data (sort it, aggregate an "others" category) before binding it if order matters.
Data Labels on Pie
Pie has no per-slice data labels. To show each slice's value, use the Tooltip, which appears when users hover a slice. The legend names the slices, and Total shows the sum in the center of a donut.
Behavior & Gotchas
⚠ Mapped series mode is not offered on Pie
You can add only one series to a Pie chart, and only in Manual mode. The mapped-series mode that auto-generates series from data rows is not available here.
⚠ Center slot and Total can conflict
The built-in Total toggle and a custom Center slot both occupy the same center hole. If you add a Center slot block, use that for your total label and leave the Total toggle off.
Common Patterns
Budget Allocation Donut with KPI in Center
Configure the chart: Set Chart Type = Pie, Group by = category field, Series → Value = amount field. Set Slice Width =
md.Add a center KPI: Drop a Text block into the Center slot. Bind it to the total budget from your data source. Style with a large font variant.
Configure the legend: Set Legend Position = Bottom and Distribute = Space Between to spread the categories across the bottom.
Progress Semi-Donut
Set angle range: Set Angle Start = -90°, End = 90° to create a top semi-circle.
Use two slices: Bind data with two rows: one for "completed" and one for "remaining". The completed slice fills the arc proportionally.
Color the slices: Use Chart Colours with conditional rules: green for the completed slice, gray for remaining.
Related Pages
Page | Relationship |
|---|---|
Overview of the circular chart family, including Pie Slice Width, Angle, Total and the Center slot | |
Another part-to-whole visualization, showing stage-based drop-off | |
For comparing values across categories with a common axis | |
Value labels for chart types that support them |