Gauge JAVASCRIPT UI Component API

Gauge Javascript API

Class

Gauge

Gauge displays an indicator within a range of values.

Properties

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

Determines the type of gauge's indicator.

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"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

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

Sets or gets gauge's animation duration. Applicable only when animation is not 'none'.

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

With the coerce property true, the value is set to the nearest value allowed by the interval property.

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

Sets or gets whether custom ticks at (possibly) uneven interval will be plotted. The ticks to be plotted are defined with the property customTicks.

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[]

If customInterval is enabled, sets a list of ticks to be plotted. If coerce is set to true, the value will snap to these ticks.

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

Determines the date pattern of the labels when mode is 'date'.

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

Sets or gets the char to use as the decimal separator in numeric values.

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

Enables or disables the digital display of the element.

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"

Sets the position of the digital display inside the element.

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

Enables or disables the element.

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 which allows rendering of a custom needle. Applicable only to analogDisplayType needle.

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

Sets or gets Gauge's end angle. This property specifies the end of the gauge's scale and is measured in degrees.

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 cooerce property is true, all values coerce to the interval's value.

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

Sets the direction of the gauge. If true - the positions of the gauge's start and end are switched.

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 can be used to format the values displayed inside the gauge labels.

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"

Determines the visibility of the labels inside 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;

localestring

Sets or gets the locale. Used in conjunction with the property messages.

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

Callback used to customize the format of the messages that are returned from the Localization Module.

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

Enables or disables the usage of logarithmic scale in the element.

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

Determines the maximum value for the scale of the element.

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"

Determines when the value of the element is updated.

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

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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

Determines the minimum value for the scale of the element.

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"

Determines whether the element works with numbers or dates.

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

Sets or gets the element's name, which is used as a reference when the data is submitted.

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"

Determines the position of the needle when analogDisplayType is 'needle'.

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

Determines the number of digits after the decimal point. Applicable only when scaleType is 'floatingPoint'.

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 represents an array of objects. Each object is a different range. The range is a colored area with specific size.

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 read only the users cannot interact with it.

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

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. If enabled, the scale is inverted and the labels and digital display are oriented from right to left.

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"

Determines the position of the scale in 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"

Determines the type of the gauge's value and scale.

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

Enables or disables scientific notation.

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 indicates whether the gauge ranges are visible or not.

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

Enables or disables displaying of units.

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

Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.

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"

Determines how the Gauge will size.

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 gets gauge's start angle. This property specifies the beggining of the gauge's scale and is measured in degrees.

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 gets the element's visual theme.

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"

Determines the position of the ticks in the Gauge.

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"

Determines the visibility of the ticks.

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

Sets or gets if the element can 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

Sets or gets the name of unit used for the values on the scale of 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"

Sets the value's validation by min/max.

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 gets the value of the element. The value can be a date only when scaleType is 'date'.

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"

Sets or gets the word length. Applicable only when scaleType is 'integer'.

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 when the value of the element is changed.

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

Focuses the element.

Invoke the focus method.

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

getOptimalSize(): object

Gets the optimal size of the element (the current width and the height based on the plotted internal elements).

Returnsobject

Invoke the getOptimalSize method.

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

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

Get/set the value of the gauge.

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