React chart example
Gauge chart
Show a single value against a range as a dial.
What is a gauge chart?
A gauge chart maps one value onto an arc between a minimum and a maximum, usually with a pointer or a filled segment showing where it sits.
When to use it
Use it for a single, instantly readable status against a known range — capacity used, score out of one hundred, progress to a target. It is a weak choice for comparing several values, because arcs are harder to compare than lengths. Use a bullet chart when you need the target and qualitative bands too.
Design tips
Show the minimum and maximum; a dial with no scale is decoration.
Use one gauge per number rather than nesting several arcs in one dial.
State the value as text as well — the arc gives the impression, the number gives the fact.
Build this chart in React
Compare with
Show target markers and qualitative bands in a compact linear layout.
Compare several values on separate circular tracks.
Graphy Chart SDK
Add Graphy’s gauge charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.