# Gauge

A **Gauge** widget is a type of **circular-arc graph** that displays the value of a measured parameter inside the arc. A needle points to the arc to show the value's location on the circle. Gauge widgets can be used in various contexts to provide a quick and easy way to understand the status or level of a measured value.

{% hint style="info" %}
The Gauge widget is available in Device Types, Devices, and Global Dashboards.
{% endhint %}

In the **Widget options** modal, enter a **name** as the **label** for your widget in the **Name** text box, and select the appropriate **data field** from the **Data field** drop-down list.

By default, the first row of the **range entity** is populated with '**from'** (lower bound) and '**to'** (upper bound) values that you have configured in the **Device Types -> Data fields** section in the **Uplink** tab, allowing you to apply a single color to the whole gauge.&#x20;

To allow users to visualize different ranges of a measured value, such as soil moisture levels, a gauge can be divided into multiple ranges.

Click on the **+** button. The '**To'** text box of the first row enables you to enter the '**to'** value of the first range. As you enter the value in the **'To'** text box of the first row, it will automatically be added to the **'From'** text box of the second row, ensuring that the two ranges do not overlap. To add more ranges to the gauge, simply click the **+** button to add a new row. By default, each new range will start from the **'To'** value of the previous range, ensuring that the ranges do not overlap.

Select a color from the **color picker** in each row to assign a unique color to that range.

{% hint style="info" %}
By assigning specific colors to each range, users can quickly determine the status of the measured value and take appropriate action as needed.
{% endhint %}

Click on the **Gradient** checkbox if you want to enable a smooth transition of colors between each range.

To add a **color** to the **background** of the widget, click on the **Background color** box and choose a color from the **color picker**.

Click on the **Save** button.&#x20;

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2F5XLOwc9HXZWZDP3Fyfko%2Fgauge-1.png?alt=media&#x26;token=6e4ded42-1ea2-43dc-8da0-24b436d03ab6" alt="" width="344"><figcaption></figcaption></figure>

The resulting **Gauge** widget looks something like this:

<figure><img src="https://2494440469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fggsr9Xlsze5cwVr4WMof%2Fuploads%2Fs6QAKgfbNfnpkYp58dLd%2Fgauge-2.png?alt=media&#x26;token=1a93f51c-0655-4c52-b024-f3fd8f4e6cab" alt="" width="300"><figcaption></figcaption></figure>
