---
title: "Gauge widgets"
slug: "gauge-widgets"
tags: ["App Editor (Route)", "Widget", "Widgets"]
updated: 2025-05-28T21:39:39Z
published: 2025-05-28T21:39:39Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Gauge widgets

*Use the embedded gauge widget to visualize progress towards a maximum value.*

There are many ways to view the live status of a variable in Tulip. One way is to use the Gauge visualization. This is a "progress bar" that shows the progress towards a preset maximum value.

## Add a gauge widget

From the Tool Bar, click **Embed** and then select **Gauge**.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Add%20a%20Gauge%20Widget%20To%20Your%20Step_154883989.png)

Customize the gauge widget via the Side Pane.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Add%20a%20Gauge%20Widget%20To%20Your%20Step_154885177.png)

- **Variable:** choose the number or integer variable that you would like to visualize in this gauge
- **Font Size:** Change the font size of the labels
- **Font Color:** Change the font color of the labels
- **Minimum:** The minimum possible value for the variable
- **Maximum:** The maximum possible value for the variable
- **Marker Color:** The color of the marker that shows the current value of the variable.
- **Background Color:** Color of the space between maximum and minimum values
- **Fill Color:** Color for the "filled" part of the gauge

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question!

**Side Pane** **(Context Pane)**

The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)