Gauge chart maker — a half-dial for one KPI and its target

How to use the gauge chart maker

1. Enter the Value, the Scale minimum and the Scale maximum.
2. Keep Show a target marker ticked and type the Target, or untick it.
3. Add a Unit suffix (such as %, km/h or points) and a Label that appears under the number.
4. Type Zone boundaries (optional) separated by commas, and set Low values are to Bad (red first) or Good (green first).
5. Choose a Dial colour, the number of Decimals (0–4), a Background and a Width, then copy the SVG or download gauge-chart.svg.

What it does and when to use it

A gauge is made for one number that has a clear range and a goal: customer satisfaction against a target, a fundraising total against its aim, server load, a quality score. It answers “where are we, and is that good?” at a glance, which is why gauges are common on dashboards and in monthly reports.

A gauge carries only one value, so it takes a lot of space for little data. To show a trend over time, add a sparkline beside it or use the line chart maker. To show how a total splits into parts, a donut chart is a better fit.

How it works

share of the scale = (value − minimum) ÷ (maximum − minimum), limited to 0–1
dial angle         = share × 180°
value vs target    = value − target

The grey track is a half circle from the minimum on the left to the maximum on the right. The filled arc in your dial colour runs from the left end to the dial angle. Zone bands are drawn as a thin ring just outside the track, and the target is a short dark line across the arc with a “Target” label. The value is printed in large type in the centre; % and ° are attached directly, other units get a space. The height is set from the width, so the gauge keeps its shape. All drawing happens in your browser.

Worked examples

Customer satisfaction (the sample). Value 72 on 0–100, target 80, zones at 50 and 75. The results read Share of the scale: 72%, Dial angle: 129.6° and Value vs target: -8. The dial stops in the amber band, short of the target line.

A speed over the limit. Value 140 on a 0–120 km/h scale, no target, no zones. The arc is full and the tool warns:

The value 140 is outside the scale 0–120; the dial is pinned at the maximum.

A defect rate where low is good. Value 2.4% on 0–10, target 3, zones 3 and 6 with Good (green first), 1 decimal. The arc covers 24% (43.2°) and sits in the green band. Value vs target: -0.6 means 0.6 points better than the target.

Limits and tips

• The maximum must be greater than the minimum; otherwise the tool says so and leaves the dial empty.
• Pick a scale that means something. A 0–100 scale for a value of 72 is honest; a 70–75 scale would make small changes look huge.
• Need a PNG for a slide tool? Use the SVG to PNG converter.