Gauges Design Only
Gauges are focused visualizations that show the current state of a metric in relation to another value of that metric, usually a target.
Half-Circle Gauge
Half-circle gauges are a visually focused way to keep track of how a given metric is doing. Half-circle gauges typically display a target value (line indicator) representing the current status in relation to the target.
When to Use
- When the value of a single metric needs to be understood by the user at a glance.
- To conserve space in vertically constrained contexts.
When Not to Use
- When the value of a metric needs to be compared to multiple metrics
Examples
- Half-Circle Gauge (shown above)
- Bullet Gauge
- Gauge with Status Indicator
- Full Circle Gauge
Usage
Gauges are excellent visualizations for monitoring progress toward a goal.The following visual cues may be used to convey this status:
- Portion of filled in space
- Line indicating current measure (more common for Half-Circle Gauges)
- Line indicating target measure (more common for Half-Circle Gauges)
- Status color for the filled in portion, using colors that convey positive, negative, and/or neutral trends (see Color Usage Guidelines)
- Label with measure inside (for full-circles) or below (for half circles)
Consider how gauges handle values outside of the expected range (such as 0% or over 100%). Options for handling this situation include maximizing or minimizing the “fullness” of the gauge, changing the color of the gauge, and posting alerts.
Examples
Bullet Gauge
Bullet Gauges are a horizontal version that indicate progress toward a target value. They can be stacked like a horizontal bar chart or placed within tabular data. A target indicator may also be included.
When To Use
- When the value of a single metric needs to be tracked by the user at a glance.
- When the visualization needs to be stacked (for easy visual comparison) and/or positioned in a table.
Stand-Alone Version with Target Line
Tabular Data Version with Target Line
Tabular Data Version without Target Line
Gauge with Status Range Indicator
For gauges intending to display a positive or negative connotation, follow the Color Usage Guidelines.
When to Use
- When there are one or more of 3 possible ranges: bad, good, or acceptable.
When Not to Use
- When a singular target value is all that is needed.
- When the range does not conceptually map to good, bad, or acceptable.
Full-Circle Gauge
Progress gauges are very similar to donut charts, but always have 100% as their target value. They are used to monitor progress towards a goal and therefore consideration should be given to what will be displayed when the user reaches their target.
When to Use
- When progress towards a known goal needs to be illustrated.
When Not to Use
- When relative values need to be shown, in those cases use a Donut or Pie Chart.
- When the target is not 100%. In those cases, use one of the other gauges.