Gauge
Last updated
Was this helpful?
Last updated
Was this helpful?
(part of package '') Extends designtime/SolutionModel: Extends runtime:
This is a reference page; many components have detailed usage guides .
Animation options for the gauge. Configures behavior such as duration, animation rule, and animated value settings. Type:
Border options for the gauge. Configures the widths and styles of the gauge borders. Type:
Color options for the gauge. Defines colors for the gauge plate, ticks, needle, borders, and other elements. Type:
Font options for the gauge. Defines fonts for tick numbers, title, units, and the value text. Type:
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
Default Value: true
animatedValue
Flag to indicate if the value should be constantly updated during the animation
Default Value: false
animation
Flag to indicate if animations are enabled
Default Value: true
animationDuration
Time in milliseconds of the animation duration
Default Value: 500
animationRule
The type of animation behaviour for the guage
Default Value: "linear"
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
borderMiddleWidth
Sets the middle width of the border in pixels. If 0, then no border will be drawn
borderOuterWidth
Sets the outer width of the border in pixels. If 0, then no border will be drawn
borderShadowWidth
Sets the width of the outer border drop shadow. If 0, then no shadow will be drawn
borders
Flag to indicate if borders should be drawn
Default Value: true
Represents color configuration for various gauge elements. scripting type: CustomType<servoyextra-gauge.ColorOptions>
colorBar
Defines the background color of the bar
colorBarProgress
Defines the color of the progress bar
colorBarStroke
Defines the color of the bar stroke
colorBorderInner
Defines the color of the inner border for the gauge plate
colorBorderInnerEnd
This value and the main border outer colour can be used to specify a gradient for the inner border
colorBorderMiddle
Defines the color of the middle border for the gauge plate
colorBorderMiddleEnd
This value and the main border middle colour can be used to specify a gradient for the middle border
colorBorderOuter
Defines the color of the outer border for the gauge plate
colorBorderOuterEnd
This value and the main border outer colour can be used to specify a gradient for the outer border
colorMajorTicks
Color of the major tick marks
Default Value: "#444"
colorMinorTicks
Color of the minor tick marks
Default Value: "#666"
colorNeedle
Color of the needle
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
Default Value: "rgba(255,160,122,.9)"
colorNeedleShadowDown
Defines the lower half of the needle shadow color
colorNeedleShadowUp
Defines the upper half of the needle shadow color
colorNumbers
Color of the numbers on the ticks
Default Value: "#444"
colorPlate
The background color for the gauge
Default Value: "#fff"
colorPlateEnd
The end background color for the gauge. If specified will give a gradient effect to the gauge
colorTitle
Color of the title
Default Value: "#888"
colorUnits
Color of the units
colorValueBoxBackground
Defines the color of the background for the value box
colorValueBoxRect
Defines the color of the value box rectangle stroke
colorValueBoxRectEnd
This value and the main value box rectangle colour can be used to specify a gradient for the value box rectangle
colorValueBoxShadow
Defines the color of the shadow for the value box. If not specified then there will be no shadow
colorValueText
Color of the value text
Default Value: "#444"
colorValueTextShadow
Color of the value text shadow. If not specified then there will be no shadow
Default Value: "rgba(0,0,0,0.3)"
Represents font configuration options for gauge elements. scripting type: CustomType<servoyextra-gauge.FontOptions>
fontNumbers
The font family to be used for the tick numbers
fontNumbersSize
The font size to be used for the tick numbers in relative units
fontNumbersStyle
The font style to be used for the tick numbers
Default Value: "normal"
fontNumbersWeight
The font weight to be used for the tick numbers
Default Value: "normal"
fontTitle
The font family to be used for the title text
fontTitleSize
The font size to be used for the title in relative units
fontTitleStyle
The font style to be used for the title
Default Value: "normal"
fontTitleWeight
The font weight to be used for the title
Default Value: "normal"
fontUnits
The font family to be used for the units
fontUnitsSize
The font size to be used for the units in relative units
fontUnitsStyle
The font style to be used for the units
Default Value: "normal"
fontUnitsWeight
The font weight to be used for the units
Default Value: "normal"
fontValue
The font family to be used for the value
fontValueSize
The font size to be used for the value in relative units
fontValueStyle
The font style to be used for the value
Default Value: "normal"
fontValueWeight
The font weight to be used for the value
Default Value: "normal"
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.
from
The starting value of the highlight range.
Default Value: 0
to
The ending value of the highlight range.
Default Value: 0
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
barLength
Defines bar length (in percent) in relation to overall gauge length
borderRadius
The radius for rounded corners of the gauge plate and its borders
colorBarEnd
If given, bar background will be drawn as gradient. If null or undefined, bar color will be solid
colorBarProgressEnd
If given, progress bar background will be drawn as gradient. If null or undefined, progress bar color will be solid
needleSide
Defines a side on which the needle should be drawn
Default Value: "both"
numbersSide
Defines a side on which the numbers should be drawn
Default Value: "both"
tickSide
Defines a side on which ticks bar should be drawn
Default Value: "both"
ticksPadding
Defines a padding used for drawing ticks out of a bar, in relative units
ticksWidth
Defines a length of major ticks width in relative units
ticksWidthMinor
Defines a length of minor tick lines width in relative units
Represents configuration options for the gauge needle. scripting type: CustomType<servoyextra-gauge.NeedleOptions>
needle
Flag to indicate if the needle should be drawn
Default Value: true
needleShadow
Flag to indicate if the needle shadow should be drawn
Default Value: true
needleType
Can be either 'line' or 'arrow'
Default Value: "arrow"
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
Default Value: "needle"
barStartPosition
Enable anti-clockwise progress bars and middle start point progress bars
Default Value: "left"
colorNeedleCircleInner
Defines a color which should be used to draw inner decorative circle element at the middle of the gauge
colorNeedleCircleInnerEnd
: If defined, inner decorative circle gauge element will be drawn as gradient. If falsy - inner circle will be drawn using solid color
colorNeedleCircleOuter
Defines a color which should be used to draw outer decorative circle element at the middle of the gauge
colorNeedleCircleOuterEnd
: If defined, outer decorative circle gauge element will be drawn as gradient. If falsy - outer circle will be drawn using solid color
needleCircleInner
Turns on/off inner decorative circle element drawing
Default Value: true
needleCircleOuter
Turns on/off outer decorative circle element drawing
Default Value: true
needleCircleSize
Defines the size in relative units of the decorative circles element of the gauge
Default Value: 45
startAngle
Defines a start angle for the start of the ticks bar
Default Value: 45
ticksAngle
Defines a max angle for ticks bar
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
Default Value: true
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.
Default Value: false
highlightsWidth
Sets the width of highlights area in relative units
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.
Default Value: ["0","20","40","60","80","100"]
majorTicksDec
The Number of digits for the decimal part of the tick number
majorTicksInt
The Number of digits for the integer part of the tick number
minorTicks
How many divisions to draw between two neighbour major ticks.
Default Value: 10
strokeTicks
Should the ticks bar of the gauge be stroked or not
Default Value: true
Represents configuration options for the gauge title. scripting type: CustomType<servoyextra-gauge.TitleOptions>
dataProviderID
A data provider for dynamic title content.
displaysTags
Determines if formatting tags are applied to the title text.
format
Specifies the formatting rules for the title text.
text
The title text to display on the gauge.
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
Default Value: true
valueDec
Number of digits for the decimal part of the value
Default Value: 2
valueInt
Number of digits for the integer part of the value
Default Value: 3
The type of gauge to display. A linear gauge is similar to a thermometer and a radial gauge is like a speedometer Type: Default Value: "radial"
An array of highlight definitions, specifying ranges to be emphasized on the gauge. Type:
Options specific to a linear gauge layout, such as bar length and tick placement. Type:
The maximum value for the gauge Type: Default Value: 100
The minimum value for the gauge Type: Default Value: 0
Needle options for the gauge. Configures the appearance and behavior of the gauge needle. Type:
Options specific to a radial gauge layout, such as angles and circular configurations. Type:
Tick options for the gauge. Defines major and minor ticks along the gauge scale. Type:
The title configuration for the gauge, including text, font, and styling options. Type:
The unit of measurement displayed on the gauge (e.g., °C, %, etc.). Type:
The current value displayed on the gauge, bound to a data provider. Type:
Options for the value box, which displays the gauge's value with optional formatting. Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type: