Gauge

About 6 min read

TwGauge · Category: Other

Settings

These settings are in the properties panel on the right while the widget is selected. The default value is the value the widget has when it is first added to a page.

Value

Setting	Type	Default	Description
Process Value processValue	Value (typed)	49.9	Main value of the widget, usually bound to a Tag or an expression in Bindings.
Value Template valueTemplate	Text	{value}%	Text in the center of the gauge; {'{'}value{'}'} is replaced with the current value (default "{'{'}value{'}'}%").
Value Color valueColor	Color	#300	Color of the value text in the center.
Value Label Class valueLabelClass	CSS classes	font-bold text-lg	CSS classes applied to the value text in the center (for example font size or weight).
Label Template labelTemplate	Text	{value}%	Text of the scale labels; {'{'}value{'}'} is replaced with the tick value.
Read Only readOnly	Checkbox	—	When on, the user cannot change the value at runtime.
Data Coverage Indicator coverageIndicator	Selection	gap	Only applies to __cons consumption snapshot bindings. Only data gaps: shows a warning icon when the period has a data gap. Gaps and partial periods: also shows a clock icon for periods that are not finished yet (today, this month). Off: no icon. Options: gap Only data gaps, all Gaps and partial periods, none Off

Scale

Setting	Type	Default	Description
Scale Start Value scaleStartValue	Number	0	Lowest value of the scale. The three color ranges are calculated between the start and end value.
Start Angle startAngle	Number	220	Angle where the scale starts, in degrees; 0 points right and positive values turn counter-clockwise (default 220).
Scale End Value scaleEndValue	Number	100	Highest value of the scale.
End Angle endAngle	Number	-40	Angle where the scale ends, in degrees (default -40). Together with the start angle it sets the length of the arc.
Tick Color tickColor	Color	#f2f2f2	Color of the major ticks.
Tick Interval tickInterval	Number	10	Distance between the major ticks in scale units; each major tick gets a label.
Minor Tick Visible minorTickVisible	Checkbox	On	Shows the small ticks between the major ticks.
Minor Tick Color minorTickColor	Color	#d9d9d9	Color of the minor ticks.
Minor Tick Interval minorTickInterval	Number	2	Distance between the minor ticks in scale units.
Scale Label Visible scaleLabelVisible	Checkbox	On	Shows the numbers at the major ticks.
Scale Label Indent From Tick scaleLabelIndentFromTick	Number	3	Distance between the labels and the ticks in pixels; negative values move the labels to the other side of the scale.
Scale Label Font Size scaleLabelFontSize	Number	12	Font size of the scale labels in pixels.
Scale Label Font Color scaleLabelFontColor	Color	#555	Color of the scale labels.
Scale Label Font Weight scaleLabelFontWeight	Number	400	Font weight of the scale labels, from 100 (thin) to 900 (bold).

Value Indicator

Setting	Type	Default	Description
Value Indicator Type valueIndicatorType	Selection	triangleNeedle	Shape of the value indicator. The needle types (rectangleNeedle, triangleNeedle, twoColorNeedle) suit the circular gauge. Options: circle Circle, rangeBar Range Bar, rectangle Rectangle, rectangleNeedle Rectangle Needle, rhombus Rhombus, textCloud Text Cloud, triangleMarker Triangle Marker, triangleNeedle Triangle Needle, twoColorNeedle Two-Color Needle
Value Indicator Color valueIndicatorColor	Color	#8FBC8F	Main color of the value indicator.
Value Indicator Width valueIndicatorWidth	Number	8	Width of the value indicator in pixels.
Value Indicator Length valueIndicatorLength	Number	60	Length of the value indicator in pixels; not every indicator type uses it.
Value Indicator Offset valueIndicatorOffset	Number	0	Distance of the value indicator from the scale line in pixels.
Value Indicator Spindle Size valueIndicatorSpindleSize	Number	14	Diameter of the circle at the needle base in pixels; used only by the needle types.
Value Indicator Spindle Gap Size valueIndicatorSpindleGapSize	Number	6	Diameter of the hole in the needle base in pixels; keep it smaller than the spindle size.
Value Indicator Second Color valueIndicatorSecondColor	Color	#cccccc	Color of the needle tip; used only by the twoColorNeedle type.
Value Indicator Second Fraction valueIndicatorSecondFraction	Number	0.3	Share of the needle drawn in the second color, 0–1 (default 0.3); only for the twoColorNeedle type.

Ranges & Limits

Setting	Type	Default	Description
Min Value minValue	Number	0	Position of a small limit marker on the scale; 0 hides the marker.
Max Value maxValue	Number	0	Position of a second limit marker on the scale; 0 hides the marker.
Range Container Offset rangeContainerOffset	Number	10	Distance of the colored range band from the scale in pixels.
Range Container Width rangeContainerWidth	Number	8	Thickness of the colored range band in pixels.
Range 1 Color range1Color	Color	#92000A	Color of the first range, which covers the first 30% of the scale.
Range 2 Color range2Color	Color	#E6E200	Color of the middle range, which covers the next 40% of the scale.
Range 3 Color range3Color	Color	#77DD77	Color of the last range, which covers the remaining 30% of the scale.

Behavior

Setting	Type	Default	Description
Redraw On Resize redrawOnResize	Checkbox	On	Redraws the gauge when the widget size changes.
Tooltip Enabled tooltipEnabled	Checkbox	Off	Shows the value in a tooltip when the pointer rests on the indicator.
Animation Enabled animationEnabled	Checkbox	Off	Moves the indicator smoothly to a new value instead of jumping.
Animation Duration animationDuration	Number	500	Duration of the indicator animation in milliseconds (default 500); used only when the animation is on.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, coverageIndicator, processValue, valueColor, valueTemplate, valueLabelClass, valueIndicatorColor, valueIndicatorType, valueIndicatorWidth, valueIndicatorLength, valueIndicatorOffset, valueIndicatorSpindleSize, valueIndicatorSpindleGapSize, valueIndicatorSecondColor, valueIndicatorSecondFraction, labelTemplate, readOnly, tickColor, tickInterval, minorTickColor, minorTickInterval, minorTickVisible, scaleLabelIndentFromTick, scaleLabelFontSize, scaleLabelFontColor, scaleLabelFontWeight, scaleLabelVisible, rangeContainerOffset, rangeContainerWidth, range1Color, range2Color, range3Color, scaleStartValue, scaleEndValue, minValue, maxValue, startAngle, endAngle, animationEnabled, animationDuration, tooltipEnabled, redrawOnResize

The style fields of the widget can also be bound as style.<field> (e.g. style.width, style.height).

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Bindings (Rules). These sections are described on the Page Editor page.