Value Widgets show aggregated numbers on their own rather than plotting them on a chart.
KPI displays a single aggregated value prominently, such as a total or the first or last value of a text field, with an optional label beside, above or below it. Use it for totals and headline metrics that need no visual comparison.
Multi KPI displays a list of aggregated numbers, each with its own label, styled together and arranged in as many columns as you choose. Use it when a handful of related headline figures belong in one place.
Radial Gauge shows a value against a defined range on a circular dial. Use it for progress or target tracking.
Linear Gauge shows a value against a range on a horizontal or vertical bar. Use it for progress or threshold indicators.
The example below shows a KPI and both gauge types tracking revenue for the year to date, with each gauge's Max set to the annual target. A Multi KPI below them places that revenue alongside the number of orders and new customers.
Setup Copy Link
KPI Copy Link
| Slot | Required | Accepts | What it does |
|---|---|---|---|
| Value | Yes | One field | The value to display. A number is aggregated, such as summed. A text field shows its first or last value. |
| Sparkline X-Axis | No | One category | Draws a small trend line of the value across the field's values, such as each month. |
The sparkline is only drawn for a numeric value.
The example below shows a KPI with one numeric field in the Value slot, the same KPI with Month added to the Sparkline X-Axis slot, and a KPI showing the last value of the Month text field.
Multi KPI Copy Link
| Slot | Required | Accepts | What it does |
|---|---|---|---|
| Values | Yes | One or more fields | Adds one tile per field, showing its aggregated value and its name. |
You can set how many columns the tiles are arranged in on the Format tab, as shown under Format.
Radial Gauge and Linear Gauge Copy Link
| Slot | Required | Accepts | What it does |
|---|---|---|---|
| Value | Yes | One numeric field | The aggregated value the gauge points to. |
By default, the gauge's scale runs from 0 to twice the value, so a positive value sits halfway along it. To compare the value with a target, set Min and Max under Gauge Scale on the Format tab.
The example below shows each gauge type twice over the same revenue. The left column keeps the default scale, and the right column sets Max to the annual target.
Format Copy Link
Value Widgets have these settings of their own on the Format tab, beside the title and appearance settings every Widget has. Your developer can change the defaults shown.
KPI Copy Link
| Setting | Where | Default | What it does |
|---|---|---|---|
| Label | KPI section | Off | Shows a label with the value. It shows the field's name unless you enter your own Text. Position places it Left of, Above or Below the value, Below by default. |
| Font | KPI section | Theme | Sets the font of the value. |
| Color | KPI section | Theme | Sets the colour of the value. |
| Alignment | KPI section | Left | Aligns the value and label. Justify puts the label at the left edge and the value at the right edge when the label is on the left. In any other case, Justify aligns the same as Left. |
| Vertical | KPI section | Center | Places the value at the top, centre or bottom of the Widget. |
| Scale to Fit | KPI section | Off | Grows or shrinks the value to fill the space the label and sparkline leave free. |
| Type | Sparkline section | Line | Draws the sparkline as a line or as bars. |
| Line Weight | Sparkline section | 1 | Sets the thickness of a line sparkline. |
| Area Fill | Sparkline section | Off | Fills the area under a line sparkline. |
The Sparkline settings apply once a numeric field is in the Value slot and a field is in the Sparkline X-Axis slot.
The example below shows each setting turned on in its own KPI, over the same revenue and sparkline.
Multi KPI Copy Link
| Setting | Where | Default | What it does |
|---|---|---|---|
| Font | Multi KPI section | Theme | Sets the font of each tile's value. |
| Color | Multi KPI section | Theme | Sets the colour of each tile's value. |
| Text Alignment | Multi KPI section | Left | Aligns the value and label within each tile. Justify puts the label at the left edge and the value at the right edge when the label is on the left. In any other case, Justify aligns the same as Left. |
| Vertical Alignment | Multi KPI section | Stretch | Places the rows of tiles within the Widget. Stretch grows the rows to fill the Widget's height. Top, Center and Bottom size each tile to its content and place the rows there. |
| Columns | Multi KPI section | 1 | Sets the number of columns the tiles are arranged in. |
| Row Separator | Multi KPI section | Off | Draws a line between rows of tiles. Width and Color change the line. |
| Column Separator | Multi KPI section | Off | Draws a line between columns of tiles. Width and Color change the line. |
| Label | Multi KPI section | On | Shows each tile's field name as its label. Position places it Left of, Above or Below the value, Below by default. Font and Color change the label's appearance. Turn Label off to hide every label. |
The example below shows the same four fields in each Multi KPI. The first keeps the defaults. The others set Columns to 2, and add the settings named in their titles.
Radial Gauge and Linear Gauge Copy Link
| Setting | Where | Default | What it does |
|---|---|---|---|
| Min, Max | Radial Gauge or Linear Gauge > Gauge Scale | Empty | Sets the start and end of the scale, in place of 0 and twice the value. |
| Value Label | Elements | On | Shows the value on the gauge. On a Linear Gauge, Placement positions it, Inside Start by default. |
| Scale Label | Elements | On | Shows the numbers along the scale. |
| Caption Label | Elements, Radial Gauge only | Off | Shows your own Text on the gauge with the value. |
| Direction | Linear Gauge section | Vertical | Draws the bar upright or across. |
| Thickness | Linear Gauge section | 50 | Sets the thickness of the bar. |
The example below shows each setting in its own gauge, all with Max set to the annual target.