Gauge Chart
A speedometer-style dial that shows a single value’s position on a scale — instantly familiar to anyone who has ever glanced at a car dashboard.
// 01 — The chart
What it looks like
A gauge showing customer satisfaction at 78/100. The filled arc and needle position make the score instantly readable, and color zones indicate performance ranges.
// 02 — Definition
What is a gauge chart?
A gauge chart (also called a speedometer chart or dial chart) is a visualization that shows a single metric’s value within a defined range, using an arc or dial that resembles a physical gauge or speedometer.
The chart typically features a semi-circular or partial-circle arc divided into colored zones (e.g., red for poor, yellow for acceptable, green for good) with a needle or filled arc indicating the current value. This design leverages a universal metaphor — almost everyone understands a speedometer.
Gauge charts are most commonly used in KPI dashboards where you need to show a single metric’s status at a glance: Is this number good, bad, or somewhere in between?
Dashboard staple: Despite criticism from data visualization purists (who prefer bullet charts), gauge charts remain one of the most popular executive dashboard components because of their instant readability.
// 03 — Anatomy
Parts of a gauge chart
// 04 — Usage
When to use it — and when not to
- Showing a single KPI value within a known range (e.g. 0–100 satisfaction score)
- Your audience needs instant status indication — is this number good or bad?
- The metric has meaningful thresholds or zones (poor / acceptable / excellent)
- Building an executive dashboard where quick scanning matters most
- The value represents progress toward a target (e.g. 78% of goal reached)
- You need to compare multiple values — use a bullet chart or bar chart instead
- Space is at a premium — gauges are space-inefficient, showing one number in a large area
- You want to show change over time — gauges are snapshots, not time series
- The value range is undefined or highly variable
- You need precision — the curved scale makes exact reading harder than a linear one
// 05 — Reading guide
How to read a gauge chart
Check the scale
Look at the minimum and maximum values on the arc. This tells you the full range the metric can span — commonly 0–100, but it varies.
Read the needle position
Where the needle points on the arc is the current value. Many gauges also display the numeric value prominently in the center.
Note the color zones
If the arc is divided into colored sections (red, yellow, green), check which zone the needle falls in — this gives immediate status context.
Look for a target marker
Some gauges include a target line or marker on the arc. Compare the needle to the target to see if you're above or below expectations.
Assess the filled vs empty arc
The ratio of the filled arc (colored portion) to the empty portion gives a quick visual sense of where the value sits in the range.
// 06 — Data format
What the data looks like
A gauge chart needs just three things: a current value, a minimum, and a maximum. Optionally, you can define threshold values for color zones and a target value.
| Parameter | Value |
|---|---|
| Current value | 78 |
| Minimum | 0 |
| Maximum | 100 |
| Poor zone | 0–40 (red) |
| Acceptable zone | 40–70 (yellow) |
| Excellent zone | 70–100 (green) |
// 07 — Construction
How to build one
Define the value range (min and max) and the current value to display.
Draw a semi-circular or partial arc as the background track.
Optionally divide the arc into color zones at meaningful threshold values.
Calculate the angle for the current value and draw a filled arc or needle to that position.
Add scale labels (min, max, and key thresholds), the numeric value display, and a descriptive title.
// 08 — Common mistakes
Mistakes to avoid
Using gauges to compare multiple values
Placing 5+ gauges side by side wastes space and makes comparison difficult. A single bullet chart or bar chart would be far more effective for multiple KPIs.
Arbitrary or missing color zones
Color zones should correspond to meaningful business thresholds. Random traffic-light colors without defined thresholds mislead readers about what's 'good' or 'bad'.
3D effects and decorative elements
Faux-3D shading, reflections, and photorealistic metal textures make the chart look dated and can distort the visual reading of the needle position.
No numeric value display
Relying solely on needle position forces readers to estimate. Always show the exact numeric value prominently — the gauge is for context, the number is for precision.
// 09 — In the wild
Real-world examples
NPS (Net Promoter Score) dashboards
Showing the current NPS on a -100 to +100 scale with zones for detractor, passive, and promoter ranges.
Server performance monitoring
CPU utilization, memory usage, and disk space displayed as gauges — green when healthy, red when nearing capacity.
Sales target progress
Showing how close the team is to hitting their quarterly revenue target — the gauge fills as the target approaches.
// 10 — Quick reference
Key facts
Also known as
Speedometer chart, dial chart, meter chart
Category
Part-to-whole
Best for
Single KPI status in dashboards
Values shown
One value per gauge
Key strength
Instant status assessment with universal metaphor
Alternative
Bullet chart (more space-efficient)
// 11 — Accessibility
Making it accessible
Always display the numeric value prominently — don't rely solely on needle position.
Use colorblind-safe zone colors or add pattern fills to distinguish zones.
Provide ARIA labels with the value, range, and current status zone.
Add text labels to zone boundaries (e.g. 'Poor: 0–40', 'Good: 70–100').
For screen readers, provide a text alternative: 'Customer satisfaction: 78 out of 100 (Excellent zone)'.
// 12 — Variations
Chart variations
Full-circle Gauge
Uses a complete 360° circle instead of a semi-circle — less common but useful when the scale wraps around.
Multi-needle Gauge
Multiple needles on one dial showing related metrics (e.g. current value and previous period).
Bullet Chart
Stephen Few's space-efficient alternative — encodes the same information (value, target, zones) in a linear bar format.
// 13 — FAQs
Frequently asked questions
What is a gauge chart?+
A gauge chart (also called a speedometer chart or dial chart) is a visualization that shows a single metric's value within a defined range, using an arc or dial that resembles a physical gauge or speedometer.
When should you use a gauge chart?+
Use a gauge chart when showing a single KPI value within a known range (e.g. 0–100 satisfaction score). It also works well when your audience needs instant status indication — is this number good or bad?, and when the metric has meaningful thresholds or zones (poor / acceptable / excellent).
When should you avoid a gauge chart?+
Avoid a gauge chart when you need to compare multiple values — use a bullet chart or bar chart instead. It is also a poor fit when space is at a premium — gauges are space-inefficient, showing one number in a large area, or when you want to show change over time — gauges are snapshots, not time series.
What data do you need to make a gauge chart?+
A gauge chart needs just three things: a current value, a minimum, and a maximum. Optionally, you can define threshold values for color zones and a target value.
How is a gauge chart different from a bullet chart?+
Both a gauge chart and a bullet chart can look similar at first glance, but they answer different questions. Reach for a gauge chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a bullet chart when its particular strengths better fit your data and audience.
What is another name for a gauge chart?+
Gauge Chart is also known as Speedometer chart, dial chart, meter chart. The name varies between fields, but the visualisation technique is the same.
What size of dataset works best for a gauge chart?+
Gauge Chart works best for Single KPI status in dashboards. Outside that range the chart either looks empty or becomes too cluttered to read clearly.
Are gauge charts accessible to screen readers?+
Yes — a gauge chart can be made accessible to screen readers by pairing it with a clear text summary of the key insight, ensuring color choices meet WCAG contrast guidelines, adding descriptive alt text or aria-label to the SVG, and offering the underlying data as an HTML table fallback for assistive technologies.