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

Simple in Storybook öffnen

With a Unit

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

With Unit in Storybook öffnen

With Zones

With Zones in Storybook öffnen

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.

Air Quality Bands in Storybook öffnen

Zone Labels Without Label in Storybook öffnen

No Value

No Value in Storybook öffnen

Custom Range

Custom Range in Storybook öffnen

Negative Range

Negative Range in Storybook öffnen

Single Zone

Single Zone in Storybook öffnen

At Minimum

At Minimum in Storybook öffnen

See Also

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