Pie Chart¶
A pie or donut chart for part-of-whole breakdowns.
Chart widgets · widget type pie-chart · binds through a data source, or an inline key–value list
Related: Generic Chart · Data Table
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Data Options | Keys-Values · Data source | Keys-Values | Inline slices you type, or records from a data source |
| Source | An expression, e.g. {$data.salesByRegion} |
— | The records, in Data source mode |
| Name Field / Value Field | Record fields | key / value |
Which fields become the slice label and size |
| Value Template | A template | Empty | On-slice labels. Setting it draws lead lines and labels |
| Pie Size / Start Angle | Degrees | 360 / 0 | The arc the chart occupies and where it begins |
| Inner Radius / Outer Radius | Lengths | — | Inner radius above zero gives a donut |
| Slice Offset / Gap / Border Radius | Numbers | 0 | Slice separation and corner rounding |
| Chart Offset / Lead Length / Max Label Width | Lengths | — | Positioning of the pie and its labels |
| Color Map | A named map, or automatic | pie |
How slice colours are chosen |
| Legend | Placement, values, toggling | Shown | The legend block |
| Tooltip | Text or element, with a template | Enabled | What is shown on hover |
| Selection | A state path | Off | Publishes the clicked slice |
| Box Style | Sizing and spacing | — | The box around the chart |
Notes¶
- Transformation steps run before the data is sliced, so top-N and grouping happen here rather than in the data source
- For trends and comparisons over an axis, use Generic Chart