# Gauge

(part of package '[Servoy Extra Components](/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### animationOptions

Animation options for the gauge. Configures behavior such as duration, animation rule, and animated value settings. Type: [CustomType\<servoyextra-gauge.AnimationOptions>](#animationoptions)

***

### borderOptions

Border options for the gauge. Configures the widths and styles of the gauge borders. Type: [CustomType\<servoyextra-gauge.BorderOptions>](#borderoptions)

***

### colorOptions

Color options for the gauge. Defines colors for the gauge plate, ticks, needle, borders, and other elements. Type: [CustomType\<servoyextra-gauge.ColorOptions>](#coloroptions)

***

### fontOptions

Font options for the gauge. Defines fonts for tick numbers, title, units, and the value text. Type: [CustomType\<servoyextra-gauge.FontOptions>](#fontoptions)

***

### gaugeType

The type of gauge to display. A linear gauge is similar to a thermometer and a radial gauge is like a speedometer Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "radial"

***

### highlights

An array of highlight definitions, specifying ranges to be emphasized on the gauge. Type: [Array\<CustomType\<servoyextra-gauge.Highlight>>](#highlight)

***

### linearGaugeOptions

Options specific to a linear gauge layout, such as bar length and tick placement. Type: [CustomType\<servoyextra-gauge.LinearGaugeOptions>](#lineargaugeoptions)

***

### maxValue

The maximum value for the gauge Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 100

***

### minValue

The minimum value for the gauge Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 0

***

### needleOptions

Needle options for the gauge. Configures the appearance and behavior of the gauge needle. Type: [CustomType\<servoyextra-gauge.NeedleOptions>](#needleoptions)

***

### radialGaugeOptions

Options specific to a radial gauge layout, such as angles and circular configurations. Type: [CustomType\<servoyextra-gauge.RadialGaugeOptions>](#radialgaugeoptions)

***

### ticks

Tick options for the gauge. Defines major and minor ticks along the gauge scale. Type: [CustomType\<servoyextra-gauge.TickOptions>](#tickoptions)

***

### title

The title configuration for the gauge, including text, font, and styling options. Type: [CustomType\<servoyextra-gauge.TitleOptions>](#titleoptions)

***

### units

The unit of measurement displayed on the gauge (e.g., °C, %, etc.). Type: [String](/reference/servoycore/dev-api/js-lib/string.md)

***

### value

The current value displayed on the gauge, bound to a data provider. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### valueBoxOptions

Options for the value box, which displays the gauge's value with optional formatting. Type: [CustomType\<servoyextra-gauge.ValueBoxOptions>](#valueboxoptions)

***

## Types

## AnimationOptions

Represents animation settings for the gauge, such as duration and animation behavior. scripting type: CustomType\<servoyextra-gauge.AnimationOptions>

* animateOnInit
  * Flag to indicate if the guage should be animated on first draw
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true
* animatedValue
  * Flag to indicate if the value should be constantly updated during the animation
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: false
* animation
  * Flag to indicate if animations are enabled
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true
* animationDuration
  * Time in milliseconds of the animation duration
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 500
* animationRule
  * The type of animation behaviour for the guage
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "linear"

## BorderOptions

Represents configuration options for the gauge borders. scripting type: CustomType\<servoyextra-gauge.BorderOptions>

* borderInnerWidth
  * Sets the inner width of the border in pixels. If 0, then no border will be drawn
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* borderMiddleWidth
  * Sets the middle width of the border in pixels. If 0, then no border will be drawn
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* borderOuterWidth
  * Sets the outer width of the border in pixels. If 0, then no border will be drawn
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* borderShadowWidth
  * Sets the width of the outer border drop shadow. If 0, then no shadow will be drawn
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* borders
  * Flag to indicate if borders should be drawn
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true

## ColorOptions

Represents color configuration for various gauge elements. scripting type: CustomType\<servoyextra-gauge.ColorOptions>

* colorBar
  * Defines the background color of the bar
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorBarProgress
  * Defines the color of the progress bar
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorBarStroke
  * Defines the color of the bar stroke
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorBorderInner
  * Defines the color of the inner border for the gauge plate
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorBorderInnerEnd
  * This value and the main border outer colour can be used to specify a gradient for the inner border
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorBorderMiddle
  * Defines the color of the middle border for the gauge plate
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorBorderMiddleEnd
  * This value and the main border middle colour can be used to specify a gradient for the middle border
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorBorderOuter
  * Defines the color of the outer border for the gauge plate
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorBorderOuterEnd
  * This value and the main border outer colour can be used to specify a gradient for the outer border
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorMajorTicks
  * Color of the major tick marks
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "#444"
* colorMinorTicks
  * Color of the minor tick marks
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "#666"
* colorNeedle
  * Color of the needle
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "rgba(240,128,128,1)"
* colorNeedleEnd
  * This value and the main needle colour can be used to specify a gradient for the needle
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "rgba(255,160,122,.9)"
* colorNeedleShadowDown
  * Defines the lower half of the needle shadow color
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorNeedleShadowUp
  * Defines the upper half of the needle shadow color
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorNumbers
  * Color of the numbers on the ticks
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "#444"
* colorPlate
  * The background color for the gauge
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "#fff"
* colorPlateEnd
  * The end background color for the gauge. If specified will give a gradient effect to the gauge
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorTitle
  * Color of the title
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "#888"
* colorUnits
  * Color of the units
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorValueBoxBackground
  * Defines the color of the background for the value box
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorValueBoxRect
  * Defines the color of the value box rectangle stroke
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorValueBoxRectEnd
  * This value and the main value box rectangle colour can be used to specify a gradient for the value box rectangle
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorValueBoxShadow
  * Defines the color of the shadow for the value box. If not specified then there will be no shadow
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorValueText
  * Color of the value text
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "#444"
* colorValueTextShadow
  * Color of the value text shadow. If not specified then there will be no shadow
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
  * **Default Value**: "rgba(0,0,0,0.3)"

## FontOptions

Represents font configuration options for gauge elements. scripting type: CustomType\<servoyextra-gauge.FontOptions>

* fontNumbers
  * The font family to be used for the tick numbers
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* fontNumbersSize
  * The font size to be used for the tick numbers in relative units
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* fontNumbersStyle
  * The font style to be used for the tick numbers
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "normal"
* fontNumbersWeight
  * The font weight to be used for the tick numbers
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "normal"
* fontTitle
  * The font family to be used for the title text
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* fontTitleSize
  * The font size to be used for the title in relative units
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* fontTitleStyle
  * The font style to be used for the title
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "normal"
* fontTitleWeight
  * The font weight to be used for the title
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "normal"
* fontUnits
  * The font family to be used for the units
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* fontUnitsSize
  * The font size to be used for the units in relative units
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* fontUnitsStyle
  * The font style to be used for the units
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "normal"
* fontUnitsWeight
  * The font weight to be used for the units
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "normal"
* fontValue
  * The font family to be used for the value
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* fontValueSize
  * The font size to be used for the value in relative units
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* fontValueStyle
  * The font style to be used for the value
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "normal"
* fontValueWeight
  * The font weight to be used for the value
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "normal"

## Highlight

Represents a gauge highlight range with starting and ending values and a specific color. scripting type: CustomType\<servoyextra-gauge.Highlight>

* color
  * The color to be used for the highlight range.
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* from
  * The starting value of the highlight range.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 0
* to
  * The ending value of the highlight range.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 0

## LinearGaugeOptions

Represents configuration options specific to a linear gauge layout. scripting type: CustomType\<servoyextra-gauge.LinearGaugeOptions>

* barBeginCircle
  * Defines if a gauge bar should start with a circle element imitating flask view of the bar. If set to zero it won’t be drawn at all
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* barLength
  * Defines bar length (in percent) in relation to overall gauge length
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* borderRadius
  * The radius for rounded corners of the gauge plate and its borders
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* colorBarEnd
  * If given, bar background will be drawn as gradient. If null or undefined, bar color will be solid
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* colorBarProgressEnd
  * If given, progress bar background will be drawn as gradient. If null or undefined, progress bar color will be solid
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* needleSide
  * Defines a side on which the needle should be drawn
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "both"
* numbersSide
  * Defines a side on which the numbers should be drawn
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "both"
* tickSide
  * Defines a side on which ticks bar should be drawn
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "both"
* ticksPadding
  * Defines a padding used for drawing ticks out of a bar, in relative units
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* ticksWidth
  * Defines a length of major ticks width in relative units
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* ticksWidthMinor
  * Defines a length of minor tick lines width in relative units
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)

## NeedleOptions

Represents configuration options for the gauge needle. scripting type: CustomType\<servoyextra-gauge.NeedleOptions>

* needle
  * Flag to indicate if the needle should be drawn
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true
* needleShadow
  * Flag to indicate if the needle shadow should be drawn
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true
* needleType
  * Can be either 'line' or 'arrow'
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "arrow"

## RadialGaugeOptions

Represents configuration options specific to a radial gauge layout. scripting type: CustomType\<servoyextra-gauge.RadialGaugeOptions>

* animationTarget
  * Defines which part of the gauge should be animated when changing the value
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "needle"
* barStartPosition
  * Enable anti-clockwise progress bars and middle start point progress bars
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "left"
* colorNeedleCircleInner
  * Defines a color which should be used to draw inner decorative circle element at the middle of the gauge
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorNeedleCircleInnerEnd
  * : If defined, inner decorative circle gauge element will be drawn as gradient. If falsy - inner circle will be drawn using solid color
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorNeedleCircleOuter
  * Defines a color which should be used to draw outer decorative circle element at the middle of the gauge
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* colorNeedleCircleOuterEnd
  * : If defined, outer decorative circle gauge element will be drawn as gradient. If falsy - outer circle will be drawn using solid color
  * **Type**: [color](/reference/servoy-developer/component_and_service_property_types.md#color)
* needleCircleInner
  * Turns on/off inner decorative circle element drawing
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true
* needleCircleOuter
  * Turns on/off outer decorative circle element drawing
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true
* needleCircleSize
  * Defines the size in relative units of the decorative circles element of the gauge
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 45
* startAngle
  * Defines a start angle for the start of the ticks bar
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 45
* ticksAngle
  * Defines a max angle for ticks bar
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 270
* useMinPath
  * Applicable only to radial gauges which have full 360-degree ticks plate. If set to true, the gauge will rotate needle/plate by a minimal rotation path
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true

## TickOptions

Represents configuration options for gauge ticks including major and minor tick settings. scripting type: CustomType\<servoyextra-gauge.TickOptions>

* exactTicks
  * Flag indicating whether the provided major tick values should be used exactly as specified.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: false
* highlightsWidth
  * Sets the width of highlights area in relative units
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 15
* majorTicks
  * An array of numeric or string values which will be displayed on a gauge bar as major ticks. This array values define the labels for the ticks. The length of the array defines a number of sections on a ticks bar.
  * **Type**: [string\[\]](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: \["0","20","40","60","80","100"]
* majorTicksDec
  * The Number of digits for the decimal part of the tick number
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* majorTicksInt
  * The Number of digits for the integer part of the tick number
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* minorTicks
  * How many divisions to draw between two neighbour major ticks.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 10
* strokeTicks
  * Should the ticks bar of the gauge be stroked or not
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true

## TitleOptions

Represents configuration options for the gauge title. scripting type: CustomType\<servoyextra-gauge.TitleOptions>

* dataProviderID
  * A data provider for dynamic title content.
  * **Type**: [dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)
* displaysTags
  * Determines if formatting tags are applied to the title text.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
* format
  * Specifies the formatting rules for the title text.
  * **Type**: [format](/reference/servoy-developer/component_and_service_property_types.md#format)
* text
  * The title text to display on the gauge.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)

## ValueBoxOptions

Represents configuration options for the gauge value box. scripting type: CustomType\<servoyextra-gauge.ValueBoxOptions>

* valueBox
  * Flag to indicate if the value box should be shown or not
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true
* valueDec
  * Number of digits for the decimal part of the value
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 2
* valueInt
  * Number of digits for the integer part of the value
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 3

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/visualization/gauge.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.