# Gauge and dial

> One value against a range, read at a glance. Few and NN/g both argue against it; this entry says when it survives that critique.

- Canonical: https://patterns.konigi.com/dashboards/gauge
- Group: Visual representation
- Level: implementation
- Status: published
- Updated: September 10, 2026
- Also called: radial gauge, speedometer, dial

---

## Problem

One number, one range, and a viewer who needs to know where in that range it currently sits without reading anything.

## Solution

An arc, a needle or filled sweep, and a scale. The gauge encodes position within a bounded range, which is genuinely useful and is also the only thing it does.

The case against it is well made and worth stating properly. Few designed the bullet graph specifically to replace the meters and gauges that were filling dashboards, on the argument that a linear, no-frills display gives a rich reading in a small space, and space is the scarce resource on a dashboard. A gauge occupies a square to encode one value along one dimension. A bullet graph encodes the same value plus a target plus qualitative ranges in a strip a fraction of the size. On area alone the gauge loses, and on a page of twelve panels that is the whole argument.

So when does it survive? Three cases, and they are narrower than the number of gauges in the wild suggests.

**When the range is genuinely bounded and familiar.** Percentage full, percentage utilised, battery, capacity. The arc's endpoints mean something. A gauge of "requests per second" has invented its own maximum and is lying about the scale.

**When it is the only radial thing on the page.** A row of gauges above a wall of line charts reads as a summary row precisely because the shape differs. That contrast is doing the work, not the arc. Repeat the gauges further down and it evaporates.

**When it mimics a physical instrument the operator already reads.** On a process display that mirrors real plant, matching the control-room instrument is a legitimate reason to be round, and consistency with the equipment beats abstract information density.

Grafana's gauge inherits the standard threshold machinery, which is where most of the value lives: the arc is coloured by the same **Absolute** or **Percentage** thresholds used everywhere else, so the colour is a shared decision rather than a per-panel invention.

## Use when

The range is real and bounded, the value's position within it is the question, and there is exactly one row of them.

## Don't use when

You have more than about six, the maximum is invented, or the viewer needs to compare gauges against each other. Comparing angles across a grid is the task human perception is worst at, and it's the task a grid of gauges sets.

## Trade-offs

Gauges spend a lot of pixels on a single scalar, and the pixels come out of the panels that could have shown a trend. They carry no history, so a value sitting mid-arc looks identical whether it has been stable for a week or arrived there in the last minute. Angular position is read less accurately than length. And the decorative versions—chrome bezels, needle shadows, tick marks at every unit—add ink that encodes nothing, which is where the pattern gets its reputation.

## Checklist

- Is the maximum a real limit or a number someone picked?
- Would a bullet graph carry the same information in a tenth of the space?
- How many gauges are on this page, and are viewers comparing them to each other?
- Does the gauge show a target as well as a value?
- Where do the threshold colours come from, and are they the same ones the charts use?
- Is there any history, or only the instantaneous value?
- Is the number also printed, for people who need precision?
- Does it stay readable at the size this panel actually renders at?
- Would a colourblind reader get the same reading from the arc?
- If this mirrors a physical instrument, does it match the one in the room?

## Compare

**Grafana** ships the gauge as a first-class panel wired into the same threshold system as everything else, which makes it consistent and makes it easy to scatter across a dashboard where a stat panel would serve better. **Tableau** has no native gauge and the community builds them from stacked pie charts, which is a quiet statement of position from a tool whose analyst audience took Few's argument seriously. **Netdata** favours a compact value with a live chart behind it over a radial reading, on the grounds that a per-second trend answers more questions than a position in an arc. **Industrial HMI software**, working to ISA-101 conventions, keeps the round instrument where it matches plant equipment and strips its decoration to a thin arc, which is the version of this pattern with the strongest justification.

## Related

Target and progress is the pattern Few built to replace this one, and the entry there covers the bullet graph properly. KPI tile is the smaller container for the same single number. Threshold line puts the same limits on a time axis where history is visible. Semantic status color governs the arc's colouring. Process mimic is the context where a round instrument is the right answer rather than a nostalgic one.

## Examples

### Ignition (Inductive Automation)

A public SCADA demo running live simulated plant data, with a runtime toggle between simple and photorealistic pump and pipe rendering—the ISA-101 argument as a setting.

**Water Treatment / Overview** — captured September 11, 2026, Ignition Perspective public demo, Water Treatment (signed out). operational, dense density, dark theme, desktop-web.

A real process mimic with live simulated plant data, and it settles two arguments from the entry. The first: the layout is topologically faithful and geometrically loose. Raw water pumps at the left, flash mixers, seven basins, nine filters, tanks, high service pumps, clearwell—the flow reads left to right because that is the process order, not because that is where the equipment stands. The second is where it departs from ISA-101, and the departure is deliberate. Green here means running. Every basin, every flocculator, every filter that is working is green, so most of the screen is coloured and the two stopped filters are the grey ones. That inverts the high-performance HMI rule—colour reserved for abnormal—and spends the budget on the ninety percent case. It is still readable, because the abnormal state is the absence of a colour everything else has, but it only works while "stopped" is rare. The pipe colours are a third channel again, encoding which fluid is in them rather than any state at all.

Hotspots in this capture:

- [Process mimic](https://patterns.konigi.com/dashboards/process-mimic) — Flat two-dimensional shapes, values placed where the instrument is, and the flow ordered by process rather than by geography.
- [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — Green for running, on every unit. The opposite of grey-at-rest, and it works only while stopped is the rare case.
- [Dense small-multiple layout](https://patterns.konigi.com/dashboards/dense-small-multiple-layout) — Nine filters, identical four-value panels. Reading one teaches you all nine, and the two stopped ones are found by shape.
- [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Stopped is grey and says Stopped. Colour and word together, so the state survives a monochrome screen.
- [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) *(this pattern)* — Tank level as a filled vertical scale—a bounded range where the endpoints are the physical tank, which is the case the gauge survives.
- [Process mimic](https://patterns.konigi.com/dashboards/process-mimic) — Pump and pipe appearance switchable between simple and photorealistic. The whole ISA-101 argument, shipped as a setting.

### Grafana (Grafana Labs)

The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it.

**Examples / Gauge** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, medium density, dark theme, desktop-web.

Nine gauges, and the page makes Few's argument against them without meaning to. The panel at bottom left holds seven arcs reading 30.6, 30.8, 30.8, 30.9, 30.9, 31.0 and 31.3 GB. Seven squares, seven needles, to say that seven disks are all about the same. The same seven values as a bullet graph would be seven short bars in a fraction of the height, and the one that was different would be obvious rather than requiring you to read each label. What the gauges do carry is a bounded range where the endpoints mean something, which is the case the pattern survives: these are percentages and capacities, not rates. The panel beside them is where it stops working—three circular gauges at 40.8, 20 and 48.6 GB, all with a red arc, so a value and another value two and a half times larger get the same verdict.

Hotspots in this capture:

- [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) *(this pattern)* — Seven arcs to report that seven disks agree. This is the area argument in one panel.
- [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — A sparkline inside the arc: the same series encoded twice in one square.
- [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — The arc runs pink through green with no perceptual order, so position on it means nothing without the number.
- [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — 40.8, 20 and 48.6 all arc red. The threshold fires for everything, so it says nothing.
- [Threshold line and region](https://patterns.konigi.com/dashboards/threshold-line) — The coloured band around the rim is the threshold, drawn as a region rather than a line.

### Netdata

Per-second charts, hundreds per node, with a per-chart anomaly ribbon instead of a band on the series.

**Metrics / System** — captured September 10, 2026, Netdata Agent v2.10.0-686-nightly (public registry node, signed out). operational, dense density, dark theme, desktop-web.

Structurally the opposite of Grafana, and worth the comparison. Nobody built this page. The right rail says "showing 720 of total 720 charts" and the tree beneath it—System, Compute, Memory, Storage, Network, Hardware, Processes, then Apps, Users, Groups, O/S Services, and every application it found—is generated from what the agent collects. The canvas is the same hierarchy rendered downward, four levels deep, headings prefixed with dashes: System, then Compute, then CPU, then the chart. There is no editorial layer at all, which means nothing is missing and nothing is prioritised. The header also does something most products won't: it reports "Live 1, Stale 8" beside the node count, so eight of the nine machines behind this view are not currently reporting and the page says so rather than drawing their last known values.

Hotspots in this capture:

- [Sidebar and canvas](https://patterns.konigi.com/dashboards/sidebar-and-canvas) — The rail is the dashboard. A generated tree of every metric family the agent found.
- [Search across panels](https://patterns.konigi.com/dashboards/search-across-panels) — 720 charts, so search is the navigation and the tree is the filing system nobody browses.
- [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Twelve tiles in two rows, in four different layouts. It reads as twelve things rather than one strip.
- [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) *(this pattern)* — Arcs for disk reads and writes, where the maximum is invented—this is a rate, not a capacity.
- [Semantic grouping](https://patterns.konigi.com/dashboards/semantic-grouping) — Sections generated by the collector rather than chosen. Consistent, and about nothing in particular.
- [Freshness indicator](https://patterns.konigi.com/dashboards/freshness-indicator) — Live 1, Stale 8. Most products would have drawn all nine and said nothing.
- [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder) — A query builder inline in the panel header: group by, aggregation, node and dimension count.
- [Compare periods](https://patterns.konigi.com/dashboards/compare-periods) — Offered per chart rather than per dashboard, which is the scoping trap: one panel shifted, the rest not.

**Metrics / System › Compute › CPU** — captured September 10, 2026, Netdata Agent (public registry node, signed out). operational, dense density, dark theme, desktop-web.

Further down the same generated page, and the section nesting is the thing to look at: "− Compute", then "−− CPU", then "−− Pressure Stall Information (PSI)", then "−−− CPU", then "−−−− Some Pressure". Four levels, each collapsible, each named by the collector rather than by a person, and the depth is signalled with leading dashes because there was no design pass to give them a hierarchy in type. It is consistent and completely unedited. Every chart also carries its own query builder in the header—group by, aggregation, node count, dimension count, sample interval—so a panel here is a live query you can re-scope in place rather than a saved configuration. Worth noting what is not in this shot: the sidebar has an Anomaly Rate toggle, switched off, and Netdata's answer to the anomaly problem is a separate derived rate per chart rather than a band drawn around the series. This capture shows the control, not the thing it draws.

Hotspots in this capture:

- [Collapsible row](https://patterns.konigi.com/dashboards/collapsible-row) — Four levels of section, depth carried by leading dashes. Generated by the collector, and never edited.
- [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) *(this pattern)* — Six arcs. Two are percentages where the endpoints mean something; four are rates in KiB/s and kbit/s on an invented maximum.
- [Legend and series toggle](https://patterns.konigi.com/dashboards/legend-and-series-toggle) — The legend is a value table: steal 0.1, softirq 0, user 1.5113, system 0.9, iowait 0.1, each with its own bar.
- [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder) — A query builder in every chart header, so the panel is a live query rather than a saved configuration.
- [Overview then detail](https://patterns.konigi.com/dashboards/overview-then-detail) — System › Compute › CPU. The breadcrumb is the only thing telling you where in 720 charts you are.

## Related patterns

- [Target and progress](https://patterns.konigi.com/dashboards/target-and-progress) — The number only matters relative to a goal, and the viewer needs to see distance to it.
- [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — A person needs to know the current value of one number, and whether it's fine, before they look at anything else.
- [Threshold line and region](https://patterns.konigi.com/dashboards/threshold-line) — A flat metric has a line it must not cross, and the chart should show where that line is.
- [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — State has to be readable before the number is.
- [Process mimic](https://patterns.konigi.com/dashboards/process-mimic) — An operator needs live values drawn on the physical layout of the plant.

## Sources

- [Stephen Few, Bullet Graph Design Specification](https://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf)
- [Grafana, Gauge panel](https://grafana.com/docs/grafana/latest/visualizations/panels-visualizations/visualizations/gauge/)
- [Grafana, Configure thresholds](https://grafana.com/docs/grafana/latest/visualizations/panels-visualizations/configure-thresholds/)

---

Screenshots on patterns.konigi.com are reproduced for commentary and criticism.
Product names and marks belong to their owners.