Shows a bar, arc, or circular meter graphic.

40
40
40
40

Properties

activeIndex {number}
The currently active series value index, if any.
colorIndex {category}-{index}
The color identifier to use for the graphic color. For example: 'graph-1'
label {node}
Callers are encouraged to use Value to construct the appropriate label.
max {number}
The largest possible value. Defaults to 100.
min {number}
The smallest possible value. Defaults to 0.
onActive {function (index)}
Hover handler. The hovered series index is passed as an argument. When the user is ceases to hover over the component, undefined is passed as an argument.
series [{value: , colorIndex: , onClick: }, ...]
An array of objects describing the data. Either this or the value property must be provided. The spiral type Meter also accepts alabel property for the objects in the series.*
size xsmall|small|medium|large|xlarge
The size of the Meter. Defaults to medium. Currently, the spiral type Meter does not respond to this property.
stacked true|false
Whether slices for multiple series values should be stacked together in the same slot or shown in separate slots.* Defaults to false.
threshold {number}
Optional threshold value.
thresholds [{value: , label: , colorIndex: }, ...]
An array of objects describing thresholds.
type bar|arc|circle|spiral
Whether to draw a bar, an arc, a circle, or a spiral.
value {number}
The current value.
vertical true|false
Whether to orient a bar or arc Meter vertically.

*Notes:

Unstacked arc, circle, and spiral Meters should be used sparingly—being mindful of the visual bias that occurs emphasizing the outer over the inner bands. Current plans for grommet 2.0 eliminate untacked circular meters.

Because of the above and space limitations, unstacked Meters are limited to a series length of 4. Currently, this also applies to unstacked bar Meters. For unstacked bar Meter series greater than 4, one can use a Box containing multiple single value Meters.

In prior versions of grommet, very small values were given a minimum visually-discernable size that was disproportionate to the scale of the rest of the Meter. This behavior was removed to provide a more accurate result and more control. If values are too small to be discernable, it is recommended to either group multiple small values into a single "other" category or to skew the value to render it visible.