How to Make a Gauge Chart (KPI Speedometer)

To make a gauge chart, open the Gauge Chart Maker, enter the Value, the Minimum and Maximum, and an optional Prefix or Suffix ($, %, km/h). Turn on Red / amber / green zones and set where Amber from and Green from start. Choose the Style — Needle or Progress arc — and the Shape — Half circle or 240° — then download a PNG, JPG or SVG.

Make a gauge chart step by step

1. Open the Gauge Chart Maker.
2. Enter the Value — for example 72.
3. Set the Minimum and Maximum of the dial — for example 0 and 100.
4. Add a Prefix or Suffix, set the Decimals, and a Caption such as "Customer satisfaction".
5. Choose the Style: Needle (points at the value over coloured zones) or Progress arc (fills the arc up to the value).
6. Choose the Shape: Half circle or 240°.
7. For traffic-light zones, tick Red / amber / green zones and set Amber from and Green from. Change the Low, Mid and High colours for metrics where lower is better.
8. Download PNG, SVG or JPG.

When a gauge works

Gauges answer one question at a glance: is this number in the red, amber or green zone? They suit a single key figure people check often:

• KPIs on a dashboard — customer satisfaction, uptime, on-time delivery.
• Progress to a target — fundraising, sales quota, project completion.
• Health metrics — budget used, capacity, error rate.
• Scores — NPS, quiz results, a risk score.

They take a lot of space for one number, so use them sparingly — two or three on a dashboard, not twenty. For comparing many values, a bar chart is far more compact; for a process with stages, a funnel chart shows where the numbers drop.

Needle or progress arc?

• Needle — the classic speedometer; best with coloured zones, so the needle's position reads as "good" or "bad".
• Progress arc — a modern fill; best for progress toward a goal ("72% of target").

Setting the zones

Zones make the gauge meaningful:

• Higher is better (satisfaction, revenue): red at the bottom, green at the top — the default.
• Lower is better (costs, defects, response time): swap the colours so the low end is green.

Base the thresholds on real targets ("we aim for 80+"), not on what looks nice.

A worked example

A support team's monthly satisfaction score is 84 out of 100. Set the range to 0–100, Amber from 70 and Green from 80, choose Needle and Half circle, and caption it "Customer satisfaction (target 80)". The needle sits just inside the green zone — the message is clear before anyone reads the number.

Values outside the range

If the value is above the maximum or below the minimum, the needle or arc stays pinned to the end of the dial — but the number shown is the real one, so nothing is hidden.

Tips

• Round numbers for the range (0–100, 0–5) make the dial readable.
• One decimal at most — gauges are for quick reading.
• Put the target in the caption — "Target: 80".
• Export SVG for dashboards and reports that need to stay sharp.

Privacy

Everything is drawn in your browser — nothing is uploaded or stored.

Frequently asked questions

Can I show several gauges together?

Make each gauge separately and place them side by side in your slide or report.

Can the gauge update live?

The image is a snapshot. Make a new one when the number changes.

Can I use it for percentages?

Yes — set the range to 0–100 and the suffix to %.