Gauge

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A semicircular gauge with a needle that displays a value within a range, optionally divided into patterned zones.

Import

import { Gauge } from "~lib/data-display/gauge";

Props

Name	Type	Required	Default	Description
value	number	Yes	N/A	Current value to display
min	number	No	0	Minimum scale value
max	number	No	100	Maximum scale value
label	string	No	N/A	Label shown below the value
showValue	boolean	No	true	Whether to render the numeric value
unit	string	No	N/A	Unit set smaller after the value, such as "°C"
zones	{ end: number; pattern: PatternType; label?: string }[]	No	N/A	Qualitative arc zones, each labelled outside the arc when it has a label
width	number | string	No	100%	Container width
height	number | string	No	100%	Container height

Examples

Simple

Abrir Simple en Storybook

With a Unit

Add a unit to set it smaller after the value, and keep label for the name of what is measured.

Abrir With Unit en Storybook

With Zones

Abrir With Zones en Storybook

Labelled Bands

Give each zone a label to name it around the outside of the arc. For a scale of whole-number bands, such as an air quality index from 1 to 5, set min and max half a step beyond the ends so each value lands in the middle of its band.

Abrir Air Quality Bands en Storybook

Abrir Zone Labels Without Label en Storybook

No Value

Abrir No Value en Storybook

Custom Range

Abrir Custom Range en Storybook

Negative Range

Abrir Negative Range en Storybook

Single Zone

Abrir Single Zone en Storybook

At Minimum

Abrir At Minimum en Storybook

See Also

• BulletChart - Linear bullet chart
• Stat - Single metric display
• LevelIndicator - A scale of equal bands, with the current one emphasized