Gauge — Smart UI JavaScript API

Gauge — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Gauge - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-gauge id="demo-gauge"></smart-gauge>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.gauge.js';

    const el = document.getElementById('demo-gauge');
    if (el) {

      el.min = 0;
      el.max = 100;
      el.value = 67;
      el.digitalDisplay = true;

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Gauge   Framework: JavaScript   Selector: smart-gauge

API counts: 48 properties, 3 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: focus(), getOptimalSize(), val()

Common events: change

Module hint: smart-webcomponents/source/modules/smart.gauge.js

Gauge displays an indicator within a range of values.

Class

Gauge

Gauge

Gauge displays an indicator within a range of values.

Selector

smart-gauge

Quick picks

changedisabledfocusvalue

Properties

AanalogDisplayTypeSpecifies 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.
AanimationConfigures 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.
AanimationDurationDefines 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.
CcoerceWhen 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.
CcustomIntervalDetermines 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.
CcustomTicksWhen 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. Click for more details. Property object's options:
    DdateLabelFormatStringSpecifies 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').
    DdecimalSeparatorSpecifies 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.
    DdigitalDisplayDetermines 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.
    DdigitalDisplayPositionSpecifies 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.
    DdisabledDetermines 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.
    DdrawNeedleCallback 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'.
    EendAngleDefines 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.
    Iinterval"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."
    IinvertedSpecifies 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.
    LlabelFormatFunctionA 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.
    LlabelsVisibilitySpecifies 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.
    LlocaleSpecifies 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.
    LlocalizeFormatFunctionA 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.
    LlogarithmicScaleControls 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.
    MmaxSpecifies 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.
    MmechanicalActionSpecifies 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.
    MmessagesSpecifies 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.
    MminSpecifies 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.
    MmodeSpecifies whether the element is configured to handle numerical values or date values, enabling appropriate functionality and validation for each data type.
    NnameSpecifies 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.
    NneedlePositionSpecifies 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.
    PprecisionDigitsSpecifies 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.
    RrangesThis 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.
    RreadonlyWhen 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.
    RrightToLeftSpecifies 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.
    SscalePositionSpecifies 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.
    SscaleTypeSpecifies 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.
    SscientificNotationSpecifies 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.
    SshowRangesThis 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.
    SshowUnitControls 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.
    SsignificantDigitsCalculates 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.
    SsizeModeSpecifies 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.
    SstartAngleSets 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.
    TthemeSets 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.
    TticksPositionSpecifies 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.
    TticksVisibilityControls 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.
    UunfocusableSpecifies 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.
    UunitSpecifies 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.
    UunlockKeyProvides 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.
    VvalidationDefines validation constraints for the value by specifying minimum and maximum allowable limits. Ensures that the value entered falls within the specified range.
    VvalueSets 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.
    WwordLengthGets 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.

    Events

    CchangeThis 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.

    Methods

    FfocusSets 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.
    GgetOptimalSizeReturns 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.
    VvalRetrieves 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.

    Properties

    analogDisplayTypeSpecifies 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."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.

    Examples

    Markup and runtime examples for analogDisplayType:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-gauge');
el.analogDisplayType = "line";

    Read the current value:

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

    animationConfigures 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."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"

    Examples

    Markup and runtime examples for animation:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-gauge');
el.animation = "simple";

    Read the current value:

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

    animationDurationDefines 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.number

    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

    Examples

    Markup and runtime examples for animationDuration:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    coerceWhen 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.boolean

    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.

    Examples

    Markup and runtime examples for coerce:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    customIntervalDetermines 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.boolean

    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.

    Examples

    Markup and runtime examples for customInterval:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    customTicksWhen 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. Click for more details. Property object's options:
      number[]

      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.

      Examples

      Markup and runtime examples for customTicks:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.customTicks = [1, 3, 5, 8];

      Read the current value:

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

      dateLabelFormatStringSpecifies 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').string

      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.

      Examples

      Markup and runtime examples for dateLabelFormatString:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.dateLabelFormatString = "FP";

      Read the current value:

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

      decimalSeparatorSpecifies 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.string

      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

      "".""

      Examples

      Markup and runtime examples for decimalSeparator:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      digitalDisplayDetermines 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.boolean

      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.

      Examples

      Markup and runtime examples for digitalDisplay:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      digitalDisplayPositionSpecifies 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."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"
      Try a demo showcasing the digitalDisplayPosition property.

      Examples

      Markup and runtime examples for digitalDisplayPosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.digitalDisplayPosition = "left";

      Read the current value:

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

      disabledDetermines 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.boolean

      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

      Examples

      Markup and runtime examples for disabled:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      drawNeedleCallback 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'.function | 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.

      Examples

      Markup and runtime examples for drawNeedle:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.drawNeedle = "customDrawNeedleFunction";

      Read the current value:

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

      endAngleDefines 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.number

      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.

      Examples

      Markup and runtime examples for endAngle:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      interval"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."number



      "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

      1
      Try a demo showcasing the interval property.

      Examples

      Markup and runtime examples for interval:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      invertedSpecifies 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.boolean

      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

      Examples

      Markup and runtime examples for inverted:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      labelFormatFunctionA 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.function | 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.

      Examples

      Markup and runtime examples for labelFormatFunction:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.labelFormatFunction = "function (value) { return value + '$'; }";

      Read the current value:

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

      labelsVisibilitySpecifies 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."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.

      Examples

      Markup and runtime examples for labelsVisibility:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.labelsVisibility = "none";

      Read the current value:

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

      localeSpecifies 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.string

      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"

      Examples

      Markup and runtime examples for locale:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.locale = "fr";

      Read the current value:

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

      localizeFormatFunctionA 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.function | 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.

      Examples

      Markup and runtime examples for localizeFormatFunction:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

      Read the current value:

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

      logarithmicScaleControls 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.boolean

      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.

      Examples

      Markup and runtime examples for logarithmicScale:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      maxSpecifies 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.number

      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.

      Examples

      Markup and runtime examples for max:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      mechanicalActionSpecifies 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."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.

      Examples

      Markup and runtime examples for mechanicalAction:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.mechanicalAction = "switchWhenReleased";

      Read the current value:

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

      messagesSpecifies 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.object

      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."

      }

      Examples

      Markup and runtime examples for messages:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.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."}};

      Read the current value:

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

      minSpecifies 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.number

      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

      0
      Try a demo showcasing the min property.

      Examples

      Markup and runtime examples for min:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      modeSpecifies whether the element is configured to handle numerical values or date values, enabling appropriate functionality and validation for each data type."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"
      Try a demo showcasing the mode property.

      Examples

      Markup and runtime examples for mode:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.mode = "numeric";

      Read the current value:

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

      nameSpecifies 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.string

      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

      ""
      Try a demo showcasing the name property.

      Examples

      Markup and runtime examples for name:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.name = "gauge2";

      Read the current value:

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

      needlePositionSpecifies 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."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"

      Examples

      Markup and runtime examples for needlePosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.needlePosition = "edge";

      Read the current value:

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

      precisionDigitsSpecifies 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.number

      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.

      Examples

      Markup and runtime examples for precisionDigits:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      rangesThis 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. {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.

      Try a demo showcasing the ranges property.

      Examples

      Markup and runtime examples for ranges:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.ranges = [{ startValue: 0, endValue: 60, className: 'range1' }, { startValue: 60, endValue: 100, className: 'range2' }];

      Read the current value:

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

      readonlyWhen 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.boolean

      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

      Examples

      Markup and runtime examples for readonly:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      rightToLeftSpecifies 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.boolean

      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.

      Examples

      Markup and runtime examples for rightToLeft:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      scalePositionSpecifies 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."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.

      Examples

      Markup and runtime examples for scalePosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.scalePosition = "outside";

      Read the current value:

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

      scaleTypeSpecifies 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."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"

      Examples

      Markup and runtime examples for scaleType:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.scaleType = "floatingPoint";

      Read the current value:

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

      scientificNotationSpecifies 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.boolean

      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

      Examples

      Markup and runtime examples for scientificNotation:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      showRangesThis 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.boolean

      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.

      Examples

      Markup and runtime examples for showRanges:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      showUnitControls 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.boolean

      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

      Examples

      Markup and runtime examples for showUnit:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      significantDigitsCalculates 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.number | 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.

      Examples

      Markup and runtime examples for significantDigits:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      sizeModeSpecifies 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."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.

      Examples

      Markup and runtime examples for sizeMode:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.sizeMode = "circle";

      Read the current value:

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

      startAngleSets 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.number

      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.

      Examples

      Markup and runtime examples for startAngle:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      themeSets 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.string

      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

      ""

      Examples

      Markup and runtime examples for theme:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.theme = "material-purple";

      Read the current value:

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

      ticksPositionSpecifies 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."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.

      Examples

      Markup and runtime examples for ticksPosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.ticksPosition = "scale";

      Read the current value:

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

      ticksVisibilityControls 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."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"
      Try a demo showcasing the ticksVisibility property.

      Examples

      Markup and runtime examples for ticksVisibility:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.ticksVisibility = "none";

      Read the current value:

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

      unfocusableSpecifies 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.boolean

      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

      Examples

      Markup and runtime examples for unfocusable:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      unitSpecifies 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.string

      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.

      Examples

      Markup and runtime examples for unit:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.unit = "cm";

      Read the current value:

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

      unlockKeyProvides 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.string

      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

      ""

      Examples

      Markup and runtime examples for unlockKey:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.unlockKey = "1111-2222-3333-4444-5555";

      Read the current value:

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

      validationDefines validation constraints for the value by specifying minimum and maximum allowable limits. Ensures that the value entered falls within the specified range."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"

      Examples

      Markup and runtime examples for validation:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.validation = "right";

      Read the current value:

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

      valueSets 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.string | 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

      0
      Try a demo showcasing the value property.

      Examples

      Markup and runtime examples for value:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      wordLengthGets 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."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.

      Examples

      Markup and runtime examples for wordLength:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-gauge');
el.wordLength = "int16";

      Read the current value:

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

      Events

      changeThis 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.CustomEvent

      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.

      Try a demo showcasing the change event.

      Examples

      Listen for change using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

      Methods

      focus(): voidSets 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-gauge, if you host multiple widgets):

      document.querySelector('smart-gauge')?.focus();

      getOptimalSize(): objectReturns 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.

      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

      On the custom element in the DOM (narrow the selector, e.g. to #my-gauge, if you host multiple widgets):

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

      val( value?: string | number | Date): stringRetrieves 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.

      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

      On the custom element in the DOM (narrow the selector, e.g. to #my-gauge, if you host multiple widgets):

      const result = document.querySelector('smart-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