Skip to content

Speedometer Widget

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

Speedometer Widget

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

The speedometer 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
formatFormat the value using a format string. Defaults to "{value}".
minMinimum value of the speedometer. Defaults to 0.
maxMaximum value of the speedometer. Defaults to 100.
valueValue to display on the speedometer. 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
--w-fill-colorThe fill color of the speedometer arc (defaults to --v-theme-primary with opacity).
--w-text-colorThe color for text elements like value and labels (defaults to --v-theme-text).
--w-needle-colorThe color of the speedometer's needle (defaults to --v-theme-text-darken-1).
--w-unitsOptional units to display next to the value.