Gauge JAVASCRIPT UI Component API

Gauge Javascript API

Class

Gauge

Gauge displays an indicator within a range of values.

Properties

analogDisplayType"needle" | "fill" | "line"

Specifies the style or format of the gauge's indicator, such as a needle, bar, or marker, which visually represents the current value on the gauge.

Allowed Values

"needle" - A needle is displayed in the middle of the gauge. The needle points to the current value.
"fill" - A fill area around the gauge is displayed. The range of the fill indicates the current value.
"line" - A fill area around the gauge is displayed with a little indicator inside it. The indicator shows the current value.

Default value

"needle"

Try a demo showcasing the analogDisplayType property.

Example

Set the analogDisplayType property.

 <smart-gauge analog-display-type='fill'></smart-gauge>

Set the analogDisplayType property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.analogDisplayType = 'line';

Get the analogDisplayType property.

 const gauge = document.querySelector('smart-gauge');

 let analogDisplayType = gauge.analogDisplayType;

animation"none" | "simple" | "advanced"

Configures or retrieves the current animation mode. When this property is set to 'none', all animations are disabled, resulting in static content with no animated transitions or effects. Setting a different value enables animation according to the specified mode.

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-gauge animation='none'></smart-gauge>

Set the animation property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.animation = 'simple';

Get the animation property.

 const gauge = document.querySelector('smart-gauge');

 let animation = gauge.animation;

animationDurationnumber

Defines or retrieves the duration of the gauge's animation effect, measured in milliseconds. This property only applies when the animation setting is enabled (i.e., its value is not 'none'). If animation is set to 'none', this duration has no effect.

Default value

300

Example

Set the animationDuration property.

 <smart-gauge animation-duration='150'></smart-gauge>

Set the animationDuration property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.animationDuration = 300;

Get the animationDuration property.

 const gauge = document.querySelector('smart-gauge');

 let animationDuration = gauge.animationDuration;

coerceboolean

When the coerce property is set to true, any value provided will automatically be adjusted to the nearest valid value based on the defined interval. This ensures that the resulting value always conforms to the step size specified by the interval property, even if the original input does not exactly match an allowed value.

Default value

false

Try a demo showcasing the coerce property.

Example

Set the coerce property.

 <smart-gauge coerce></smart-gauge>

Set the coerce property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.coerce = false;

Get the coerce property.

 const gauge = document.querySelector('smart-gauge');

 let coerce = gauge.coerce;

customIntervalboolean

Determines whether custom tick marks, which may be placed at uneven intervals, are displayed on the plot. The specific positions of these custom ticks are specified using the customTicks property. This option allows you to override the default tick placement and use your own set of tick values.

Default value

false

Try a demo showcasing the customInterval property.

Example

Set the customInterval property.

 <smart-gauge custom-interval></smart-gauge>

Set the customInterval property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.customInterval = false;

Get the customInterval property.

 const gauge = document.querySelector('smart-gauge');

 let customInterval = gauge.customInterval;

customTicksnumber[]

When customInterval is enabled, you can define a specific list of tick values to be displayed on the plot. If coerce is set to true, any input value will automatically snap to the nearest tick from this predefined list, ensuring that only these tick values can be selected or represented.

Try a demo showcasing the customTicks property.

Example

Set the customTicks property.

 <smart-gauge custom-ticks='[100, 200, 1000, 8000, 10000]'></smart-gauge>

Set the customTicks property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.customTicks = [1, 3, 5, 8];

Get the customTicks property.

 const gauge = document.querySelector('smart-gauge');

 let customTicks = gauge.customTicks;

dateLabelFormatStringstring

Specifies the format of the date labels that appear when the mode property is set to 'date'. This determines how dates are displayed on the labels (e.g., 'YYYY-MM-DD', 'MM/DD/YYYY').

Default value

"d"

Try a demo showcasing the dateLabelFormatString property.

Example

Set the dateLabelFormatString property.

 <smart-gauge date-label-format-string='dddd-MMMM-yyyy'></smart-gauge>

Set the dateLabelFormatString property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.dateLabelFormatString = 'FP';

Get the dateLabelFormatString property.

 const gauge = document.querySelector('smart-gauge');

 let dateLabelFormatString = gauge.dateLabelFormatString;

decimalSeparatorstring

Specifies or retrieves the character used as the decimal separator in numeric values. This property allows you to define which character (such as "." or ",") separates the integer part from the fractional part in numbers when displaying or parsing numeric data.

Default value

"".""

Example

Set the decimalSeparator property.

 <smart-gauge decimal-separator=','></smart-gauge>

Set the decimalSeparator property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.decimalSeparator = '.';

Get the decimalSeparator property.

 const gauge = document.querySelector('smart-gauge');

 let decimalSeparator = gauge.decimalSeparator;

digitalDisplayboolean

Determines whether the element's content is shown or hidden on the digital interface. When enabled, the element is visible to users; when disabled, the element is not displayed on the screen.

Default value

false

Try a demo showcasing the digitalDisplay property.

Example

Set the digitalDisplay property.

 <smart-gauge digital-display></smart-gauge>

Set the digitalDisplay property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.digitalDisplay = false;

Get the digitalDisplay property.

 const gauge = document.querySelector('smart-gauge');

 let digitalDisplay = gauge.digitalDisplay;

digitalDisplayPosition"bottom" | "center" | "right" | "top"

Specifies the placement of the digital display within the element, allowing you to control its alignment (e.g., top, bottom, left, right, or center) relative to the element’s boundaries.

Allowed Values

"bottom" - Positiones the digital display at the bottom of the Gauge.
"center" - Positiones the digital display at the center of the Gauge.
"right" - Positiones the digital display on the right of the Gauge.
"top" - Positiones the digital display at the top of the Gauge.

Default value

"bottom"

Example

Set the digitalDisplayPosition property.

 <smart-gauge digital-display-position='top'></smart-gauge>

Set the digitalDisplayPosition property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.digitalDisplayPosition = 'left';

Get the digitalDisplayPosition property.

 const gauge = document.querySelector('smart-gauge');

 let digitalDisplayPosition = gauge.digitalDisplayPosition;

disabledboolean

Determines whether the element is interactive or not. When enabled, the element responds to user actions (such as clicks or keyboard input); when disabled, the element appears inactive and does not accept user interaction.

Default value

false

Example

Set the disabled property.

 <smart-gauge disabled></smart-gauge>

Set the disabled property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.disabled = false;

Get the disabled property.

 const gauge = document.querySelector('smart-gauge');

 let disabled = gauge.disabled;

drawNeedlefunction | null

Callback function that enables custom rendering of the needle element when using the 'analogDisplayType' setting. This function is called during the drawing process, allowing you to define the appearance and behavior of the needle beyond the default rendering. Only applicable when the display type is set to 'analog'.

Try a demo showcasing the drawNeedle property.

Example

Set the drawNeedle property.

 <smart-gauge draw-needle='null'></smart-gauge>

Set the drawNeedle property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.drawNeedle = customDrawNeedleFunction;

Get the drawNeedle property.

 const gauge = document.querySelector('smart-gauge');

 let drawNeedle = gauge.drawNeedle;

endAnglenumber

Defines or retrieves the end angle of the gauge, specifying where the gauge’s scale terminates. The angle is measured in degrees, starting from the gauge’s initial position (commonly 0 degrees). Adjusting this property determines the extent of the gauge’s arc and affects how the scale is rendered visually.

Default value

210

Try a demo showcasing the endAngle property.

Example

Set the endAngle property.

 <smart-gauge end-angle='150'></smart-gauge>

Set the endAngle property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.endAngle = 300;

Get the endAngle property.

 const gauge = document.querySelector('smart-gauge');

 let endAngle = gauge.endAngle;

intervalnumber

"When the 'coerce' property is set to 'true', all input values are automatically adjusted to fall within the specified interval. Any value outside the interval will be coerced to the nearest boundary value of the interval."

Default value

Try a demo showcasing the interval property.

Example

Set the interval property.

 <smart-gauge interval='2'></smart-gauge>

Set the interval property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.interval = 10;

Get the interval property.

 const gauge = document.querySelector('smart-gauge');

 let interval = gauge.interval;

invertedboolean

Specifies the orientation of the gauge. When set to true, the starting and ending positions of the gauge are reversed, causing the gauge to be displayed in the opposite direction. If false, the gauge follows its default direction. Use this option to customize the gauge's flow based on your application's requirements.

Default value

false

Example

Set the inverted property.

 <smart-gauge inverted></smart-gauge>

Set the inverted property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.inverted = false;

Get the inverted property.

 const gauge = document.querySelector('smart-gauge');

 let inverted = gauge.inverted;

labelFormatFunctionfunction | null

A callback function that allows you to customize the formatting of the values shown within the gauge labels. This function receives the raw value as an argument and should return the formatted string to be displayed. Use this to control the appearance, number formatting, units, or localization of label values inside the gauge.

Example

Set the labelFormatFunction property.

 <smart-gauge label-format-function='function (value) { return value + '%'; }'></smart-gauge>

Set the labelFormatFunction property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.labelFormatFunction = function (value) { return value + '$'; };

Get the labelFormatFunction property.

 const gauge = document.querySelector('smart-gauge');

 let labelFormatFunction = gauge.labelFormatFunction;

labelsVisibility"all" | "endPoints" | "none"

Specifies whether the labels within the element are displayed or hidden. When set to true, the labels inside the element are visible; when set to false, the labels are not shown. This property allows you to control the display of label text within the element.

Allowed Values

"all" - All labels are visible.
"endPoints" - Only the labels on the end points ( start and end ) are visible.
"none" - No labels are displayed.

Default value

"all"

Try a demo showcasing the labelsVisibility property.

Example

Set the labelsVisibility property.

 <smart-gauge labels-visibility='endPoints'></smart-gauge>

Set the labelsVisibility property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.labelsVisibility = 'none';

Get the labelsVisibility property.

 const gauge = document.querySelector('smart-gauge');

 let labelsVisibility = gauge.labelsVisibility;

unlockKeystring

Provides a way to retrieve or assign the unlockKey property, which is a unique code required to activate or gain access to the product's full features. Use this property to securely manage the product's access control.

Default value

Example

Set the unlockKey property.

 <smart-gauge unlock-key=''></smart-gauge>

Set the unlockKey property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property.

 const gauge = document.querySelector('smart-gauge');

 let unlockKey = gauge.unlockKey;

localestring

Specifies or retrieves the current locale setting, typically defined as a language and regional code (e.g., "en-US" for U.S. English). This property works together with the messages property to determine which localized message set is displayed, enabling proper language and formatting support for users based on their selected locale.

Default value

"en"

Example

Set the locale property.

 <smart-gauge locale='de'></smart-gauge>

Set the locale property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.locale = 'fr';

Get the locale property.

 const gauge = document.querySelector('smart-gauge');

 let locale = gauge.locale;

localizeFormatFunctionfunction | null

A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized strings are structured or displayed before they are delivered to your application, enabling support for advanced formatting, variable interpolation, or context-specific adaptations.

Example

Set the localizeFormatFunction property.

 <smart-gauge localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-gauge>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const gauge = document.querySelector('smart-gauge');

 let localizeFormatFunction = gauge.localizeFormatFunction;

logarithmicScaleboolean

Controls whether the element displays data using a logarithmic scale. When enabled, values are plotted on a logarithmic axis, which is useful for visualizing data that spans several orders of magnitude. When disabled, a standard linear scale is used.

Default value

false

Try a demo showcasing the logarithmicScale property.

Example

Set the logarithmicScale property.

 <smart-gauge logarithmic-scale></smart-gauge>

Set the logarithmicScale property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.logarithmicScale = false;

Get the logarithmicScale property.

 const gauge = document.querySelector('smart-gauge');

 let logarithmicScale = gauge.logarithmicScale;

maxnumber

Specifies the upper limit for the element's scale, preventing it from being scaled beyond this maximum value. This setting ensures that when the element is resized or transformed, its scale will not exceed the defined maximum threshold.

Default value

100

Try a demo showcasing the max property.

Example

Set the max property.

 <smart-gauge max='20'></smart-gauge>

Set the max property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.max = 50;

Get the max property.

 const gauge = document.querySelector('smart-gauge');

 let max = gauge.max;

mechanicalAction"switchUntilReleased" | "switchWhenReleased" | "switchWhileDragging"

Specifies the event or condition that triggers the update of the element’s value, such as on user input, when focus is lost, or after a specific action occurs. This setting controls how and when changes to the element's value are recognized and processed in the application.

Allowed Values

"switchUntilReleased" - The value is being udpated until the needle/fill is released. When released the initial value is restored to the element.
"switchWhenReleased" - The value is udpated after the needle/fill is released.
"switchWhileDragging" - The value is updated while the needed/fill is dragged. Clicking on the scale also changes the value. Default behavior.

Default value

"switchWhileDragging"

Try a demo showcasing the mechanicalAction property.

Example

Set the mechanicalAction property.

 <smart-gauge mechanical-action='switchUntilReleased'></smart-gauge>

Set the mechanicalAction property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.mechanicalAction = 'switchWhenReleased';

Get the mechanicalAction property.

 const gauge = document.querySelector('smart-gauge');

 let mechanicalAction = gauge.mechanicalAction;

messagesobject

Specifies or retrieves an object containing the text strings displayed by the widget, allowing for customization and localization of all user-facing messages. This property works together with the locale property to support multiple languages by providing translated strings for different locales. Use this to ensure the widget's interface is fully adaptable to users' language preferences.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"significantPrecisionDigits": "{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.",

"invalidMinOrMax": "{{elementType}}: Invalid {{property}} value. Max cannot be lower than Min.",

"noInteger": "{{elementType}}: precisionDigits could be set only on \"floatingPoint\" scaleType."

}

Example

Set the messages property.

 <smart-gauge messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","significantPrecisionDigits":"{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.","invalidMinOrMax":"{{elementType}}: Ungultiger Wert {{property}} Max kann nicht niedriger sein als Min.","noInteger":"{{elementType}}: precisionDigits konnte nur fur \"floatingPoint\" scaleType festgelegt werden."}}'></smart-gauge>

Set the messages property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","significantPrecisionDigits":"{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.","invalidMinOrMax":"{{elementType}}: Invalid {{property}} value. Max cannot be lower than Min.","noInteger":"{{elementType}}: precisionDigits could be set only on \"floatingPoint\" scaleType."}};

Get the messages property.

 const gauge = document.querySelector('smart-gauge');

 let messages = gauge.messages;

minnumber

Specifies the lowest allowable value for the element’s scale, preventing the element from being scaled below this threshold. This property ensures that the element cannot appear smaller than the defined minimum scale value.

Default value

Try a demo showcasing the min property.

Example

Set the min property.

 <smart-gauge min='20'></smart-gauge>

Set the min property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.min = 50;

Get the min property.

 const gauge = document.querySelector('smart-gauge');

 let min = gauge.min;

mode"date" | "numeric"

Specifies whether the element is configured to handle numerical values or date values, enabling appropriate functionality and validation for each data type.

Allowed Values

"date" - The scale displays dates in the range of min - max.
"numeric" - The scale displays numbers in the range of min - max.

Default value

"numeric"

Example

Set the mode property.

 <smart-gauge mode='date'></smart-gauge>

Set the mode property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.mode = 'numeric';

Get the mode property.

 const gauge = document.querySelector('smart-gauge');

 let mode = gauge.mode;

namestring

Specifies or retrieves the element’s name attribute, which serves as the identifier for the element’s value when form data is submitted to the server. This name is used as the key in the name-value pair sent with the form submission, enabling the server-side application to access the corresponding data.

Default value

Example

Set the name property.

 <smart-gauge name='gauge1'></smart-gauge>

Set the name property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.name = 'gauge2';

Get the name property.

 const gauge = document.querySelector('smart-gauge');

 let name = gauge.name;

needlePosition"center" | "edge"

Specifies the angle or position of the needle when analogDisplayType is set to 'needle'. This value controls where the needle points on the analog display, allowing customization of its exact placement based on the current data or setting.

Allowed Values

"center" - The needle is positioned in the center of the Gauge.
"edge" - The needle is positioned on the inner side of the scale closer to the ticks and labels.

Default value

"center"

Example

Set the needlePosition property.

 <smart-gauge needle-position='center'></smart-gauge>

Set the needlePosition property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.needlePosition = 'edge';

Get the needlePosition property.

 const gauge = document.querySelector('smart-gauge');

 let needlePosition = gauge.needlePosition;

precisionDigitsnumber

Specifies how many digits should be displayed after the decimal point for numeric values. This property is only applicable when the scaleType is set to 'floatingPoint'; it has no effect for other scale types.

Example

Set the precisionDigits property.

 <smart-gauge precision-digits='5'></smart-gauge>

Set the precisionDigits property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.precisionDigits = 6;

Get the precisionDigits property.

 const gauge = document.querySelector('smart-gauge');

 let precisionDigits = gauge.precisionDigits;

ranges{startValue: number, endValue: number, className: string}[]

This property is an array containing multiple objects, where each object defines a distinct range. Each range represents a colored area characterized by its own specific size and properties, such as start and end values, color, and label. These ranges allow you to visually differentiate segments according to predefined criteria on a graphical interface or data visualization component.

Example

Set the ranges property.

 <smart-gauge ranges='[{ startValue: 0, endValue: 50, className: 'range1' }, { startValue: 50, endValue: 100, className: 'range2' }]'></smart-gauge>

Set the ranges property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.ranges = [{ startValue: 0, endValue: 60, className: 'range1' }, { startValue: 60, endValue: 100, className: 'range2' }];

Get the ranges property.

 const gauge = document.querySelector('smart-gauge');

 let ranges = gauge.ranges;

readonlyboolean

When the element is set to read-only, users are unable to modify its value or content; they can view the information but cannot interact with or edit the element in any way.

Default value

false

Example

Set the readonly property.

 <smart-gauge readonly></smart-gauge>

Set the readonly property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.readonly = false;

Get the readonly property.

 const gauge = document.querySelector('smart-gauge');

 let readonly = gauge.readonly;

rightToLeftboolean

Specifies whether the element should use right-to-left (RTL) alignment to support languages and locales that utilize right-to-left fonts, such as Arabic or Hebrew. When enabled, the element's scale is inverted, and all labels and digital displays are repositioned and rendered in a right-to-left orientation to ensure proper localization and readability for RTL scripts. This property can be both set and retrieved.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-gauge right-to-left></smart-gauge>

Set the rightToLeft property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.rightToLeft = false;

Get the rightToLeft property.

 const gauge = document.querySelector('smart-gauge');

 let rightToLeft = gauge.rightToLeft;

scalePosition"inside" | "outside" | "none"

Specifies the placement of the scale within the element, indicating where the scale will appear (e.g., top, bottom, left, or right) relative to the element.

Allowed Values

"inside" - The scale is positioned inside the Gauge.
"outside" - The scale is positioned outside of the Gauge.
"none" - The scale is hidden.

Default value

"inside"

Try a demo showcasing the scalePosition property.

Example

Set the scalePosition property.

 <smart-gauge scale-position='inside'></smart-gauge>

Set the scalePosition property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.scalePosition = 'outside';

Get the scalePosition property.

 const gauge = document.querySelector('smart-gauge');

 let scalePosition = gauge.scalePosition;

scaleType"floatingPoint" | "integer"

Specifies the data type used for the gauge’s value and defines the corresponding scale (e.g., linear, logarithmic). This setting ensures that input values are interpreted correctly and displayed with the appropriate measurement scale on the gauge.

Allowed Values

"floatingPoint" - The value of the element is a decimal number with a floating point.
"integer" - The value of the element is always an integer.

Default value

"floatingPoint"

Example

Set the scaleType property.

 <smart-gauge scale-type='integer'></smart-gauge>

Set the scaleType property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.scaleType = 'floatingPoint';

Get the scaleType property.

 const gauge = document.querySelector('smart-gauge');

 let scaleType = gauge.scaleType;

scientificNotationboolean

Specifies whether numerical values should be displayed using scientific notation (e.g., 1.23e+4) instead of standard decimal formatting. Set to true to enable scientific notation, or false to display numbers in regular decimal form.

Default value

false

Example

Set the scientificNotation property.

 <smart-gauge scientific-notation></smart-gauge>

Set the scientificNotation property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.scientificNotation = true;

Get the scientificNotation property.

 const gauge = document.querySelector('smart-gauge');

 let scientificNotation = gauge.scientificNotation;

showRangesboolean

This property determines whether the gauge’s range indicators are displayed on the gauge component. When set to true, the range segments (such as colored bands or sections representing value intervals) will be visible on the gauge; when set to false, these range indicators will be hidden.

Default value

false

Try a demo showcasing the showRanges property.

Example

Set the showRanges property.

 <smart-gauge show-ranges></smart-gauge>

Set the showRanges property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.showRanges = true;

Get the showRanges property.

 const gauge = document.querySelector('smart-gauge');

 let showRanges = gauge.showRanges;

showUnitboolean

Controls whether units are shown or hidden in the user interface, allowing you to toggle the display of measurement units (e.g., px, %, em) alongside values.

Default value

false

Example

Set the showUnit property.

 <smart-gauge show-unit></smart-gauge>

Set the showUnit property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.showUnit = false;

Get the showUnit property.

 const gauge = document.querySelector('smart-gauge');

 let showUnit = gauge.showUnit;

significantDigitsnumber | null

Calculates the number of significant digits present in a given number. This property is relevant only when the scaleType is set to 'integer', ensuring that the digit count pertains exclusively to whole numbers, not decimals or other formats.

Try a demo showcasing the significantDigits property.

Example

Set the significantDigits property.

 <smart-gauge significant-digits='1'></smart-gauge>

Set the significantDigits property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.significantDigits = 2;

Get the significantDigits property.

 const gauge = document.querySelector('smart-gauge');

 let significantDigits = gauge.significantDigits;

sizeMode"auto" | "circle" | "none"

Specifies the method used to determine the overall dimensions (width and height) of the Gauge component, affecting how it adapts to its parent container or specified sizing rules.

Allowed Values

"auto" - The height of the Gauge is automatically calculated based on the size of the plotted internal elements.
"circle" - The Gauge is always a circle regardless of the differences between width and height set by the user.
"none" - The Gauge's size is controlled by the user's settings.

Default value

"circle"

Try a demo showcasing the sizeMode property.

Example

Set the sizeMode property.

 <smart-gauge size-mode='auto'></smart-gauge>

Set the sizeMode property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.sizeMode = 'circle';

Get the sizeMode property.

 const gauge = document.querySelector('smart-gauge');

 let sizeMode = gauge.sizeMode;

startAnglenumber

Sets or retrieves the starting angle of the gauge. This property defines the position, in degrees, where the gauge's scale begins, measured clockwise from the reference point (typically the rightmost horizontal axis at 0 degrees). Adjusting this value changes where the gauge arc starts, allowing for customized gauge orientations.

Default value

-30

Try a demo showcasing the startAngle property.

Example

Set the startAngle property.

 <smart-gauge start-angle='0'></smart-gauge>

Set the startAngle property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.startAngle = 20;

Get the startAngle property.

 const gauge = document.querySelector('smart-gauge');

 let startAngle = gauge.startAngle;

themestring

Sets or retrieves the visual theme applied to the element, allowing you to customize or query its overall appearance—such as colors, backgrounds, and style variations—to match different design schemes.

Default value

Example

Set the theme property.

 <smart-gauge theme='material'></smart-gauge>

Set the theme property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.theme = 'material-purple';

Get the theme property.

 const gauge = document.querySelector('smart-gauge');

 let theme = gauge.theme;

ticksPosition"scale" | "track"

Specifies the exact placement of tick marks along the Gauge's scale, such as inside, outside, or across the gauge axis. This setting controls where the ticks appear relative to the gauge track for improved readability and customization.

Allowed Values

"scale" - The ticks are positioned on the scale.
"track" - The ticks are positioned inside the track (fill) of the Gauge. Only takes effect if analogDisplayType is not 'needle'.

Default value

"scale"

Try a demo showcasing the ticksPosition property.

Example

Set the ticksPosition property.

 <smart-gauge ticks-position='track'></smart-gauge>

Set the ticksPosition property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.ticksPosition = 'scale';

Get the ticksPosition property.

 const gauge = document.querySelector('smart-gauge');

 let ticksPosition = gauge.ticksPosition;

ticksVisibility"major" | "minor" | "none"

Controls whether the ticks are displayed or hidden on the axis. If set to true, ticks will be visible; if false, ticks will be hidden. This option allows you to toggle the tick marks for improved chart customization.

Allowed Values

"major" - Only the major ticks are visible.
"minor" - Only the minor ticks are visible.
"none" - All ticks are hidden.

Default value

"minor"

Example

Set the ticksVisibility property.

 <smart-gauge ticks-visibility='major'></smart-gauge>

Set the ticksVisibility property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.ticksVisibility = 'none';

Get the ticksVisibility property.

 const gauge = document.querySelector('smart-gauge');

 let ticksVisibility = gauge.ticksVisibility;

unfocusableboolean

Specifies whether the element can receive keyboard focus. When set to true, the element can be focused programmatically or via user interaction (such as using the Tab key); when set to false, the element will be excluded from the tab order and cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-gauge unfocusable></smart-gauge>

Set the unfocusable property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.unfocusable = false;

Get the unfocusable property.

 const gauge = document.querySelector('smart-gauge');

 let unfocusable = gauge.unfocusable;

unitstring

Specifies or retrieves the unit of measurement (such as pixels, percentage, or em) that is applied to the values displayed on the element's scale. This determines how the scale values are interpreted and rendered for the element.

Default value

"kg"

Try a demo showcasing the unit property.

Example

Set the unit property.

 <smart-gauge unit='mm'></smart-gauge>

Set the unit property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.unit = 'cm';

Get the unit property.

 const gauge = document.querySelector('smart-gauge');

 let unit = gauge.unit;

validation"interaction" | "strict"

Defines validation constraints for the value by specifying minimum and maximum allowable limits. Ensures that the value entered falls within the specified range.

Allowed Values

"interaction" - Programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and no change event is fired.
"strict" - The value is always validated by min and max

Default value

"strict"

Example

Set the validation property.

 <smart-gauge validation='left'></smart-gauge>

Set the validation property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.validation = 'right';

Get the validation property.

 const gauge = document.querySelector('smart-gauge');

 let validation = gauge.validation;

valuestring | number | date

Sets or retrieves the current value of the element. If the scaleType property is set to 'date', the value must be a date object or a valid date string; otherwise, the value should match the expected data type for the current scaleType.

Default value

Example

Set the value property.

 <smart-gauge value='50'></smart-gauge>

Set the value property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.value = 100;

Get the value property.

 const gauge = document.querySelector('smart-gauge');

 let value = gauge.value;

wordLength"int8" | "int16" | "int32" | "int64" | "uint8" | "uint16" | "uint32" | "uint64"

Gets or sets the word length used for values. This property is only applicable when scaleType is set to 'integer'; it has no effect for other scale types.

Allowed Values

"int8" - The value can be in the range (-128, 127).
"int16" - The value can be in the range (-32768, 32767).
"int32" - The value can be in the range (-2147483648, 2147483647).
"int64" - The value can be in the range (-9223372036854775808, 9223372036854775807).
"uint8" - The value can be in the range (0, 255).
"uint16" - The value can be in the range (0, 65535).
"uint32" - The value can be in the range (0, 4294967295).
"uint64" - The value can be in the range (0, 18446744073709551615).

Default value

"int32"

Try a demo showcasing the wordLength property.

Example

Set the wordLength property.

 <smart-gauge word-length='int8'></smart-gauge>

Set the wordLength property by using the HTML Element's instance.

 const gauge = document.querySelector('smart-gauge');

 gauge.wordLength = 'int16';

Get the wordLength property.

 const gauge = document.querySelector('smart-gauge');

 let wordLength = gauge.wordLength;

Events

changeCustomEvent

This event is triggered whenever the value of the element is modified by the user or through a script, typically after the element loses focus or its value is updated programmatically. It allows you to detect and respond to changes in the element’s content.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.oldValue - The previous value of the element.

ev.detail.value - The new value of the element.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const gauge = document.querySelector('smart-gauge');
gauge.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

focus(): void

Sets keyboard focus to the specified element, making it the active element for user input and interaction. This allows users to immediately begin typing or interacting with the element without manually clicking or tabbing to it. Commonly used for form fields or interactive components to improve accessibility and user experience.

Invoke the focus method.

const gauge = document.querySelector('smart-gauge');
gauge.focus();

getOptimalSize(): object

Returns the optimal size of the element, including the current width and the calculated height based on the layout and dimensions of its internal child elements. This ensures the element can fully contain its content without overflow, reflecting the most appropriate size for display.

Returnsobject

Invoke the getOptimalSize method.

const gauge = document.querySelector('smart-gauge');
const result = gauge.getOptimalSize();

val( value?: string | number | Date): string

Retrieves or updates the current value displayed by the gauge component. Use this to programmatically read the gauge’s status or set it to a new value within its defined range.

Arguments

value?string | number | Date

The value to be set. If no parameter is passed, returns the current value of the gauge. The value can be a date only when scaleType is 'date'.

Returnsstring

Invoke the val method.

const gauge = document.querySelector('smart-gauge');
const result = gauge.val("10");

CSS Variables

--smart-gauge-default-widthvar()

Default value

"var(--smart-box-width)"

smartGauge default width

--smart-gauge-default-heightvar()

Default value

"var(--smart-box-height)"

smartgauge default height

--smart-gauge-track-bordervar()

Default value

"var(--smart-border)"

Track's border color

--smart-gauge-track-backgroundvar()

Default value

"var(--smart-background)"

Track's background color

--smart-gauge-needle-backgroundvar()

Default value

"var(--smart-primary)"

Needle's background color

--smart-gauge-label-fill-statevar()

Default value

"initial"

Fill color of labels

--smart-gauge-label-strokevar()

Default value

"initial"

Stroke color of labels