4.37.0

Gauge

Gauges are data vizualization components. They show values from 0 to 100% and beyond.

Demo

API

Tag

Name Description
<aui-gauge> Custom HTML tag

Attributes

Name Value Required Description
value Number

Sets the value of the gauge.
decimalplaces Number

Sets the number of decimal places. Typical values are 0, 1, and 2. Default: 1
normalrange Number

Sets the upper limit of the normal range. Default: 80
normalcolor blue-medium, yellow-dark, red-dark

Sets the fill color for a normal range gauge. Default: blue-medium
uppercolor blue-medium, yellow-dark, red-dark

Sets the fill color for an upper range gauge. Default: yellow-dark
criticalcolor blue-medium, yellow-dark, red-dark

Sets the fill color for a critical range gauge. Default: red-dark
i18n string

A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name Value Required Description
value Number

Sets the value of the gauge.
decimalPlaces Number

Sets the number of decimal places. Typical values are 0, 1, and 2. Default: 1
normalRange Number

Sets the upper limit of the normal range. Default: 80
normalColor blue-medium, yellow-dark, red-dark

Sets the fill color for a normal range gauge. Default: blue-medium
upperColor blue-medium, yellow-dark, red-dark

Sets the fill color for an upper range gauge. Default: yellow-dark
criticalColor blue-medium, yellow-dark, red-dark

Sets the fill color for a critical range gauge. Default: red-dark
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Demo

Tag

Name
<AuiGauge>

Props

Name Value Required Description
value Number

Sets the value of the gauge.
decimalPlaces Number

Sets the number of decimal places. Typical values are 0, 1, and 2. Default: 1
normalRange Number

Sets the upper limit of the normal range. Default: 80
normalColor blue-medium, yellow-dark, red-dark

Sets the fill color for a normal range gauge. Default: blue-medium
upperColor blue-medium, yellow-dark, red-dark

Sets the fill color for an upper range gauge. Default: yellow-dark
criticalcolor blue-medium, yellow-dark, red-dark

Sets the fill color for a critical range gauge. Default: red-dark
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Skylab React links

General information about using our React package

i18n Strings

ID Description Default value
"auiGauge.ariaLabel" The default aria-label of the gauge. Usage

Guidelines

Accessibility

An aria-label provided on the <aui-gauge> element will be applied to the child <canvas> element.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com