> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/bdb-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/charts-gallery/other-charts/gauge.md).

# Gauge

## Gauge

The gauge component is used to show the progress towards a goal.  The set Target gets marked and the pointer displays our progress.

Default Chart Image:

![](/files/GIxSZ0FTBaI7zRMMNcm8)

### **Properties of the Gauge component:**

* **Background:** 
  * The user can enable border, change the border color, and border-radius. 
  * The user can enable the shadow, change the shadow color, and transparency of the shadow. 
  * If the user gives 2 or more colors in the gradient its position can be adjusted by Gradient Rotation.

#### **General:** 

* The user can change the height, width, top, left values. 
* Put a checkmark in given box to select **Initial Visibility** option. If this option is enabled, then the chart appears in the first preview of the dashboard. 
*  If the user enables the ticks, then the user can see marker lines on the gauge. 
* Use a checkmark in the given box to show the Range.
* If the user enables the ***show title*** option and gives some units in the ***Title*** section it will get displayed inside the gauge at the top position.

![](/files/zZgCftKR7joS9Rfqmibr)

{% hint style="info" %} <mark style="color:green;">Please Note:</mark> The chart will not be visible at the first preview if the initial visibility is unchecked.
{% endhint %}

#### **Indicators:**&#x20;

* Colors for the range can be specified under the range section.&#x20;
* Also, what is the current value of the gauge and the target can be specified under the ***Value Variable*** and ***Target Value***.&#x20;
* Also, the minimum and maximum range can be set.

![](/files/mJeR0dx4ldVJpphfw9mF)

#### **Style:**&#x20;

* The ***Bezel color*** can be changed to adjust the gauge border color.&#x20;
* The selected ***Face colo*****r** will be the **Gauge Fill** color.&#x20;
* The Tick Color changes the color of ticks/markers between ranges.&#x20;
* The ***Pointer Color*** is changed for adjusting the tick pointer color.&#x20;
* Also, the user can change the **label font color**, **title font color**, **font family**, and **font size** under this section.

![](/files/DME5BMMUGVdfCT6cLLbx)

#### Formatter:

* This properties section helps to provide format for the monetary data.

![](/files/avBhvIbMGJZ0dX7fi9qe)

#### Modified Gauge by changing the properties:

![](/files/tFjIRO52p0jY4eJFudY3)