How to build Value Pair components


Component Value Pair
Overview Use a simple visualization to display a primary value and a secondary value. Ideal for single KPIs, such as a stock price or a ratio.
Key Features Apply indicators to one or both of the values displayed in the component.
Add context to values using the prefix and suffix fields.


The Value Pair component allows you to display data using two values: the primary and secondary value. This component is similar to the Table component, and supports many of the same formats such as sparklines, images, hyperlinks, and indicators. Here is an example of this component:

Component Structure

Here is the structure of the Value Pair component.

Key Features

This section provides examples of different ways to use the Value Pair component.


Applying indicators to one or both the values in the Value Pair component can help provide context for the value being displayed. You can change the color of the value, or assign an icon to the value using the Indicators panel.

To apply indicators

  1. Select the component to which you want to apply the indicators.
  2. Open the Indicators panel.
  3. Set up a predicate (eg: If x is greater than 1).
  4. Set up a reaction (eg: then change colour to green).
  5. Add multiple conditions to apply indicators for values in a variety of states.

Use the Prefix and Suffix fields to add context

The prefix and suffix fields allow you to add context to the "raw" value without interfering with indicator conditions or formula elements. For instance, if you want to show a ratio, use the data panel to show the value (eg: 2.5), and the suffix field to demonstrate the value is part of a ratio by adding : 1 to the suffix field. Learn more about the Prefix and Suffix fields.

Important concepts

These articles provide an overview of important concepts for building Klips: