Gauge
A gauge is a circular or semicircular indicator that visually represents a value within a fixed range, often resembling a speedometer or dial.
Philosophy
Gauges provide an at-a-glance understanding of performance, status, or progress within a defined range.
They give users instant feedback about where a value stands.
They are most effective for comparisons against thresholds.
They rely on visual metaphors (like car dashboards) for familiarity.
Anatomy
Variants
Standard
145° arc, compact.
States
Active
Shows current value.
Usage tips
Dos
Use colors (green/yellow/red) to reinforce thresholds.
Provide numeric labels to reduce ambiguity.
Keep design minimal so the value is clear.
Don’ts
Don’t use gauges for precise values — use numeric indicators or charts.
Don’t overload dashboards with too many gauges.
Don’t rely on color alone — use labels/ticks too.
Real-world example
