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