Visualize part-to-whole data as a pie or donut chart. Data and labels come from Chart Data and formulas.
In the builder: Elements → Results Widgets → PieChart
Widget Settings
Variable
| UI field | Description |
|---|---|
| Name | Chart identifier (required). |
| Value | Chart title (optional text or formula). |
Chart Data
Click Edit Chart to configure:
- Rows — slice labels (e.g. categories)
- Columns — value column for slice sizes
- Data — numeric values per row (can use formulas)
- Slice colors — color per slice
Chart options
| UI field | Description |
|---|---|
| Chart Type | Pie chart or Donut chart |
| Legend Position | Hidden, top, bottom, left, right |
| Start Angle | Rotation of the first slice |
| Total | Optional fixed total for donut charts |
| Donut Width | Ring thickness (donut only) |
| Show Label | Show values on slices |
| Label Position | Inside, outside, or center |
| Label Offset | Distance of labels from slices |
Field Option
| UI field | Description |
|---|---|
| Decimal Places | Precision for displayed values. |
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field | Description |
|---|---|
| Show | Always or Conditionally |
| Active mode is | Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive | Optional formula; evaluated on Calculate |
Design
Style Label (chart title area), Control Area, and Control (chart canvas). Legend uses classes like .cp-legend-top, .cp-legend-bottom, etc.
Custom CSS:
| Selector / class | Targets |
|---|---|
#cp-{ID} |
Chart widget container (.cp-chart). |
.pie-chart-widget |
Pie chart type class. |
.cp-legend-* |
Legend by position. |