AnnotatedMeter

Examples

An interactive Meter annotated with a Value and optional Legend.

70
Total
70
Total

NOTE: This component comes from the grommet-addons repository. You will need to add a dependency to that repository in order to use it.

Usage

import AnnotatedMeter from 'grommet-addons/components/AnnotatedMeter';
<AnnotatedMeter series={} />

Properties

legend true|false
Whether to show a Legend below the Meter. Defaults to false.
max {number}
The largest possible value.
series [{value: , colorIndex: , onClick: }, ...]
An array of objects describing the data.
size small|medium|large
The size of the Meter and Value. Defaults to medium.
type bar|circle
Whether to draw a bar or a circle visual.
units {string}
Optional units to display next to the value.

Example

70
Total
  • First20
  • Second50
  • Total70
<AnnotatedMeter type='circle'
  max={70}
  series={[{"label": "First", "value": 20, "colorIndex": "graph-1"}, {"label": "Second", "value": 50, "colorIndex": "graph-2"}]}
  legend={true} />