React chart example
Bullet chart
Show a measure against a target and qualitative ranges in a single compact row.
What is a bullet chart?
A bullet chart layers three things in one row: a bar for the measure, a marker for the target, and banded background ranges for qualitative context such as poor, fair and good.
When to use it
Use it on dashboards where a gauge would waste space — one KPI against its target, repeated down a column. It carries more information than a gauge in a fraction of the area. Use a plain bar when there is no target to compare against.
Design tips
Keep the bands to three at most, in a single hue at increasing lightness.
Make the target marker visually distinct from the measure bar, not just a different colour.
Repeat the same scale down a stack of bullets so rows are comparable.
Build this chart in React
Compare with
Give one measure a prominent circular display with clearly defined limits.
Use when there is no target or qualitative range to show.
Graphy Chart SDK
Add Graphy’s bullet charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.