Skip to content

Pie Chart

The Pie Chart shows how a whole splits into parts: sales by region, tickets by status, spend by category. Each record becomes one slice. Set an inner radius and it becomes a donut.

See also Generic Chart and Data Table.

Using it

  1. Drop a Pie Chart onto the page. It starts with three sample slices you can edit under Key-Values.
  2. To use real data, set Source to Data Source and point Data Source at your records, for example {$data.salesByRegion}.
  3. Set Name Field to the field that labels each slice and Value Field to the field that sizes it.

The chart now draws one slice per record, colored from the theme palette. The sections below cover shape, labels, legend and tooltip.

Options

Option Values Default Description
Source Key-Values or Data Source Key-Values Whether the slices are typed in by hand or come from a data source
Key-Values A list of key and value pairs Three sample slices The slices, when Source is Key-Values. Add more with Add Item
Data Source An expression, e.g. {$data.items} None The records, when Source is Data Source. Transformation steps can filter, sort and group them first
Name Field / Value Field Record fields key / value Which fields become the slice label and the slice size. The list suggests the fields of the first record, and you can also type a name
Selection Enable, Mode (Single · Multiple), Selection path, Key fields Off Remembers the slice a visitor clicks in a state path, so other widgets can react
Tooltip See Tooltip Off What is shown when the visitor hovers over a slice
Variant Theme variants Default Picks the chart's look from the theme. See Variants
Custom Style CSS for Legend and Legend Items Empty Extra styling for the legend
Box Style Sizing and spacing Height 300px The box around the chart

Pie options

These settings shape the pie itself.

Option Values Default Description
Chart Offset Top, right, bottom, left 10 -50 -10 50 Space between the edge of the widget and the pie
Pie Size 1 to 360 degrees 360 How much of a full circle the chart uses. 180 gives a half pie
Start Angle 0 to 360 degrees 0 Where the first slice begins
Slice Offset 0 to 100 px 0 How far slices are pushed out from the centre
Gap 0 to 100 px 1 The gap between slices
Border Radius 0 to 100 px 0 Rounding of slice corners
Inner Radius / Outer Radius 0 to 100 20 / 80 The size of the pie. An inner radius above zero makes a donut
Clockwise On · Off Off The direction the slices run

Labels and legend

Labels sit on or next to the slices. The legend lists the slices beside the chart.

Option Values Default Description
Value Template A template Empty The text of each slice label. Setting it draws labels with lead lines and enables the three settings below
Max Label Width 0 to 300 px 50 The width at which a label wraps
Lead Length 0 to 100 px 10 The length of the line from the slice to its label
Inner & Outer Point Radius A range, 25 to 100 80 / 90 Where lead lines start and where they bend
Show Values On · Off Off Shows each slice's value in the legend
Hide Legend On · Off Off Hides the legend
Show/Hide series on Legend Click On · Off Off Lets visitors click a legend entry to hide or show its slice
Show/Hide path A state path, e.g. $vars.chartToggles Empty Remembers which slices are hidden
Value Format A format None How values in the legend are formatted
Align, Vertical Align, Vertical Layout Positions Centred at the bottom Where the legend sits and whether it runs down or across
Shape Circle, Square, Triangle, Line, Bar, Column Theme default The marker drawn next to each legend entry
Shape Size A number Theme default The size of that marker
Item Template A template, e.g. {$record.name} ({$record.value:n;2}) Empty Rewrites the text of each legend entry

Tooltip

A tooltip appears when the visitor hovers over a slice.

Option Values Default Description
Enable On · Off Off Turns the tooltip on
Content Text or Element Text Text uses a Title and a Description template. Element lets you build the tooltip from widgets with Edit content...
Placement Up, Down, Left, Right and the four corners Automatic Where the tooltip appears
Mouse Trap On · Off Off Keeps the tooltip open while the mouse is over it
Track Mouse On · Off Off The tooltip follows the cursor
Visible Expression An expression, e.g. {$record.value} > 0 Empty Shows the tooltip only when the expression is true

Tips

A few things worth knowing.

  • Slice colors come from the theme's Palette. See Themes.
  • Transformation steps run before the data is sliced. Group records or keep only the top five here rather than in the data source.
  • Template fields suggest the fields of your data as you type.
  • For trends and comparisons along an axis, use a Generic Chart.