Gauge - CSS API Reference

All Common CSS variables:

Specific CSS variables for Gauge styling:

• --smart-gauge-default-width: Gauge's default width.
• --smart-gauge-default-height: Gauge's default height.

The following CSS selectors can be used to style Gauge:

• smart-gauge - applied to the whole Gauge element. Can be used for setting width, height and font-related CSS properties.
  • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
    • smart-digital-display-container - the container for the digital display.
      • .smart-digital-display - applied to the Gauge digital display, which is an instance of smartNumericTextBox.
    • smart-svg-container - a DIV container for the SVG element.
      • .smart-needle - applied to the Gauge needle. Can be used to set the length of the needle (via the height CSS property), the width of the needle (via the width CSS property), as well as the SVG-related properties fill, stroke and stroke-width. Only available when the Gauge property analogDisplayType is 'needle'.
      • .smart-needle-central-circle - applied to the central circle in the Gauge. Can be used to hide the circle by setting display: none, as well as to set the SVG-related properties fill, stroke and stroke-width. The radius of the circle is automatically set based on the width of the needle. Only available when the Gauge property analogDisplayType is 'needle'.
      • .smart-track - applied to the Gauge track. Can be used to set the width of the track (via the width CSS property), as well as the SVG-related properties fill, stroke and stroke-width. Only available when the Gauge property analogDisplayType is 'fill' or 'line'.
        • .smart-value - applied to the colored area in the track representing the value. Can be used to set the SVG-related properties fill, stroke and stroke-width. Only available when the Gauge property analogDisplayType is 'fill'.
        • .smart-line - applied to the colored line in the track representing the value. Can be used to set the SVG-related properties fill, stroke and stroke-width. Only available when the Gauge property analogDisplayType is 'line'.
      • .smart-label - applied to Gauge labels. Can be used to set the SVG-related properties fill, stroke and stroke-width.
      • .smart-tick - applied to Gauge ticks. Can be used to set the length of ticks (via the width CSS property) and the color of ticks (via the stroke property).
        • .smart-tick-minor - applied to Gauge minor ticks. Can be used to set the length of minor ticks (via the width CSS property) and the color of ticks (via the stroke property).
      • .smart-range - applied to colored ranges in Gauge. Can be used to set the width of the range (via the width CSS property). The fill of ranges should be styled via the classes applied through the Gauge property ranges.

Demo

<style>
        #gauge{
                --smart-gauge-default-width: 300px;
                --smart-gauge-default-height: 300px;
                --smart-gauge-needle-background: #999999;
        }
</style>