Skip to content

Gauge Widget

The gauge widget provides a gauge display for a numeric value.

Gauge Widget

The gauge displays a sweeping needle and background area with minimum and maximum values. A numeric reading is also displayed.

The gauge widget animates the movement no the needle in response to large updates.

Configurable components

NameDescription
cardBackground button card component
primaryButton component

Widget Properties

Class NameDescription
minMinimum value of the gauge. Defaults to 0.
maxMaximum value of the gauge. Defaults to 100.
valueValue to display on the gauge. Defaults to 0.

Common CSS Properties

These CSS properties configure the underlying button component.

PropertyDescription
backgroundBackground color of the button
colorText color of the button
border-radiusRound the button corners
box-shadowAdd a shadow to the button