How to build Gauge components


Component Gauge
Overview Use a variety of Gauge styles to show progress towards a goal.
Key Features Customize the Gauge using a variety of styles
Apply indicators to the Gauge
Apply multiple color ranges to the Gauge


The Gauge component allows you to compare a current value against a target value using a variety of styles, such as arc, semicircle, vertical, and horizontal Gauges. You can use indicators to show when the current value has surpassed a threshold (or is not reaching a goal), or use color ranges to indicate a wider range of states (e.g., cold, warm, hot).

Component Structure

This is an example of the structure of a Gauge component with a color range added (an optional component).

Tip! Add color ranges to the Gauge by using the buttons beside the Klip preview.

Key Features

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

Custom Style

You can customize the Gauge style using the following options: horizontal, vertical, arc, semicircle and circle. Here is an example of a vertical Gauge:

To change the gauge style

  1. Select the Gauge component from the tree.
  2. Use the Gauge Style menu to select an appropriate style.

Apply color ranges

You can apply color ranges to your Gauge so that as your "needle" passes through certain ranges, you can assess its state. In this example, color ranges are used to indicate which occupancy rate is acceptable and which is unacceptable.

To apply color ranges

  1. Select Gauge in the component hierarchy, select the Properties tab and click Add Color Range.
  2. Select Range 1 in the component hierarchy and select a color by clicking the colored square.
  3. Set Start 1 and End 1 values using the formula bar.
  4. Repeat steps 1 - 3 as needed.


Apply indicators

You can apply indicators to a Gauge to change the gauge color according to the values of Current Value and Target ValueThese indicators override the configured color ranges.

To apply indicators

  1. Select the Gauge in the component hierarchy and select the Indicators tab.
  2. Click Add to create an indicator: e.g., If: Current Value is greater than 1 then: Gauge change color.
  3. Repeat step 2 as needed.

Learn more:

Now that you know more about the Gauge component, check out this tutorial:

Important concepts

These articles provide essential information about Klip building that you can apply to your Gauge components: