Overview
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 (e.g., 180°–360° for a half-circle).
Tip: Pie: Slice Width = full. Donut: Slice Width = sm/md/lg. Semi-donut: Slice Width not full + Angle range like 180°–360°. 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. Perfect for a total KPI, a label, or a custom icon. |
Appearance Properties
| Property | Options / Default | Description |
| Slice Width | sm, md (default), lg, full | Ring thickness preset. full = solid pie. Smaller values create a larger center hole. |
| Angle | Start angle / End angle in degrees; default 0°–360° | Controls the sweep of the chart. Set to 180°–360° for a semi-donut bottom half, 0°–180° for a top half. |
| Total | toggle | Shows the summed value in the center hole. Appears only when Slice Width is not full. |
| Legend Position | top, right (default), bottom, left, remove | Legend placement. Also offers a Distribute option: Center or Space Between. |
| 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 0°, End 180°
Bottom half: Start 180°, End 360°
Three-quarter: Start 45°, End 315°
Legend Configuration
The Pie legend supports more positioning options than other chart types:
| 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. |
| Remove | No legend shown. |
The Distribute option controls legend alignment: Center centers items, Space Between spreads them across the available width.
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 does not support the standard series data labels toggle — slice value labels are configured differently (the Tooltip and the built-in Total display serve this purpose). For slice labels, use the Tooltip or place a custom Center slot block.
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.
⚠ On Data Point Click is available; there is no series-level click
Clicking a slice fires the standard On Data Point Click event with the slice's full record as the payload.
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 = 180°, End = 360° to create a bottom 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 |
| Funnel Chart | Another part-to-whole visualization, showing stage-based drop-off |
| Bar & Column Charts | For comparing values across categories with a common axis |
| Data Labels & Annotations | Value labels for chart types that support them |
Frequently Asked Questions
How do I create a donut chart instead of a solid pie?
Set Chart Type = Pie, then set Slice Width to any value except full: use sm for a thin ring, md for a medium ring, or lg for a wide ring. That's the only change — a donut is a pie with a center hole.
How do I show the total value in the center of a donut?
Enable the Total toggle in the Appearance settings. This automatically sums all slice values and renders the result in the center hole. For more control over the formatting or content of the center, use the Center slot instead: drop a Text block in the slot and bind it to a computed total from your data source.
My pie slices are in the wrong order. How do I fix it?
The Pie chart renders slices in the same order as the rows in the bound data source — there is no auto-sort option. To control slice order, sort your data query before binding it. For example, sort by value descending to put the largest slice first, or sort by a custom rank field.
Can I add text labels directly on the pie slices?
Pie does not support inline slice labels the same way cartesian charts support data labels. The recommended approaches are: (1) use the built-in Total toggle for a center summary, (2) use the Center slot for custom center content, or (3) rely on the Legend for slice identification. On-slice percentage labels are not natively supported in the current release.