Bullet

How it’s built

A bullet chart puts several blocks in the same place, so they read as one bar. The slat contains:

• a Bar to 120, which is the track,
• a Bar to d.done, the progress along that track,
• a Tick at 100, the goal,
• a Label with edge="end" for the percentage.

Blocks paint in the order you write them, so the progress covers the track and the goal sits on top of both. The scale is [0, 120], which leaves room to overshoot the goal.

The gallery version adds:

• An icon instead of a name. The start Label holds an SVG path rather than text, colored with the slat’s own --rhp-color, so the icon matches its bar.
• A bubble at the tip of the progress. It is a Label with at={d.done}, so it follows the end of the bar, and the slat’s CSS fades it in on hover.

The simple version

A track, the progress along it, and a target line. The same structure with almost no styling: a good place to start your own.

The gallery version