KPI

The KPI (Key Performance Indicator) widget is a simple widget that displays values arranged in a grid. KPIs can have a title, value, and a VS section (the subtitle of the KPI).

Basic usage

We will create a KPI widget with two values. First, paste this code into a Python block and execute it:

price = 100
total_sales = 120000

Then, create a KPI Widget and go to its 'Elements' tab. Create two elements:

• Set the titles to Price and Total Sales respectively.
• Set the values to $price and $total_sales respectively.

Save the widget, and both values should be displayed.

API reference

Basic

Setting name	Type	Description	Default
Horizontal gutter	8 | 16 | 24 | 32 | 40 | 48	The horizontal gutter between the KPIs.	24
Vertical gutter	8 | 16 | 24 | 32 | 40 | 48	The vertical gutter between the KPIs.	24
Numeral format for integers	string/numeraljs	The numeral format for integers. See Numeral.js	0,0
Numeral format for floats	string/numeraljs	The numeral format for floats. See Numeral.js	0,0.00

Style

KPI Title

Setting name	Type	Description	Default
Title font size	number	The font size of the title.	14
Title font family	string	The font family of the title.

KPI Value

Setting name	Type	Description	Default
Value font size	number	The font size of the value.	24
Value font family	string	The font family of the value.

Elements

Re-ordering elements

You can re-order the KPI elements by dragging and dropping them in the 'elements' tab.

Basic

Setting name	Type	Description	Default
Element	string	Title of the KPI element. Will only be use to manage settings.	idx:<element_index>
Data type	auto | numeric | string	The data type of the KPI value.	auto
Title	string	The title of the KPI element.
Value	string	The value of the KPI element.
Icon	string	The icon of the KPI element.

Style

Setting name	Type	Description	Default
Icon and Value color	string/color	The color of the icon and value.	#000000
Title font size	number	The font size of the title.	14
Title font family	string	The font family of the title.
Value font size	number	The font size of the value.	24
Value font family	string	The font family of the value.

Format

Setting name	Type	Description	Default
Suffix	string	The suffix of the KPI value.
Span	number	Number of grid cells the KPI spans, out of 24 per row.	6
Offset	number	Number of grid cells to offset the KPI from the left, out of 24 per row.	0

VS

Setting name	Type	Description	Default
Text	string	The text of the VS section.
Icon	string	The icon of the VS section.
Color	string/color	The color of the VS section.	#ff4d4f

Events

The Events settings let you trigger actions in response to clicks on the widget elements. When the event is activated, the current block and the subsequent blocks are executed.

Setting name	Type	Description	Default
On event	none | onClick	Whether to activate the event onClick or not	none
Event variable	string	Name of the variable to store the data when the event is triggered

See also

• All widgets — browse the full widget catalog.
• Chart — visualize the trends behind your KPIs.