Bullet chart
Stephen Few's compact performance-vs-target chart. A horizontal (or vertical) bar with three qualitative ranges painted behind it, a target marker line, and the current value as a thinner foreground bar.
The demo reports the 2005 DARPA Grand Challenge — Stanford's "Stanley" drove 132.2 mi across the Mojave (target: 132 mi) in 6 h 53 m to take the $2 M prize. The 2004 Challenge's best result was 7.4 mi; one year later five robots finished. The visible band just inside the target marker is the moment self- driving cars stepped off the slide deck.
Source: DARPA Grand Challenge (2005) — Wikipedia
Public surface
use wisp_chart::indicator::{Bullet, Orientation};
let bullet = Bullet {
value: 270.0,
target: 250.0,
ranges: [150.0, 225.0, 300.0], // poor → ok → good thresholds
orientation: Orientation::Horizontal,
};
let g = bullet.emit_graphics(&theme, Vec2::new(400.0, 80.0));
let _ = stage.add_child(root, g);The five primitives
A bullet chart renders five primitives in this order:
- Poor band —
[0, ranges[0]], light grey - OK band —
[0, ranges[1]], medium grey (paints over poor) - Good band —
[0, ranges[2]], darker grey (paints over OK) - Value bar — thinner foreground bar from 0 to
value - Target line — vertical (or horizontal) marker at
target
Bands paint over each other because each spans from 0 to its
threshold. The visible bands are the differences: poor is the
portion before ranges[0], OK is the strip from ranges[0] to
ranges[1], good is the strip from ranges[1] to ranges[2].
Orientation
| Orientation | Use case |
|---|---|
Horizontal (default) | Dashboard rows, tight vertical packing |
Vertical | Sidebar KPIs, when label fits to the left |
Theme integration
| Field | Drives |
|---|---|
theme.indicator.bullet_poor_color | Poor (lowest) qualitative band |
theme.indicator.bullet_ok_color | Satisfactory (middle) band |
theme.indicator.bullet_good_color | Good (highest) band |
theme.indicator.bullet_value_color | Value bar fill |
theme.indicator.bullet_target_color | Target marker line |