Gauge

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

Demo

A gauge with no value renders the empty state.

Add fullwidth to make the gauge fill its container instead of the fixed 222px. Here the same gauge fills a wide (360px) and a narrow (180px) container.

API

Tag

Name	Description
`<aui-gauge>`	Custom HTML tag

Attributes

Name	Value	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`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for a normal range gauge. Default: `teal-gradient`
`uppercolor`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for an upper range gauge. Default: `yellow-dark`
`criticalcolor`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for a critical range gauge. Default: `red-medium`
`fullwidth`	Boolean	When present, the gauge fills 100% of its container width instead of the fixed 222px. Default: `false`
`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	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`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for a normal range gauge. Default: `teal-gradient`
`upperColor`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for an upper range gauge. Default: `yellow-dark`
`criticalColor`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for a critical range gauge. Default: `red-medium`
`fullWidth`	Boolean	When `true`, the gauge fills 100% of its container width instead of the fixed 222px. Default: `false`
`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	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`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for a normal range gauge. Default: `teal-gradient`
`upperColor`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for an upper range gauge. Default: `yellow-dark`
`criticalcolor`	`teal-gradient`, `blue-medium`, `yellow-dark`, `red-dark`, `red-medium`	Sets the fill color for a critical range gauge. Default: `red-medium`
`fullWidth`	Boolean	When `true`, the gauge fills 100% of its container width instead of the fixed 222px. Default: `false`
`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
`"auiGauge.emptyMessage"`	Message shown when the gauge has no value.	The gauge updates once there's data

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