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

Open Simple in Storybook

With a Unit

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

Open With Unit in Storybook

With Zones

Open With Zones in 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.

Open Air Quality Bands in Storybook

Open Zone Labels Without Label in Storybook

Import​

Props​

Examples​

Simple​

With a Unit​

With Zones​

Labelled Bands​

No Value​

Custom Range​

Negative Range​

Single Zone​

At Minimum​

See Also​

Import

Props

Examples

Simple

With a Unit

With Zones

Labelled Bands

No Value

Custom Range

Negative Range

Single Zone

At Minimum

See Also