Bullet chart

Stephen Few bullet — qualitative bands + value bar + target marker. Self-contained SVG, does not need ChartRoot.

Primitive: ChartBullet· Standalone (no ChartRoot needed)

Interactive demo

Usage

import { ChartBullet } from '@ramtt/charts'

<ChartBullet
  label="Revenue"
  value={72}
  target={80}
  ranges={[
    { to: 50, color: 'var(--n300)' },
    { to: 75, color: 'var(--n400)' },
    { to: 100, color: 'var(--n500)' },
  ]}
  unit="%"
/>

Props

Prop	Type	Default	Description
value*	`number`	—	Current value (the main bar)
ranges*	`BulletRange[]`	—	Qualitative bands (poor → excellent)
target	`number`	—	Target marker position
compare	`number`	—	Comparative marker (e.g. previous period) — diamond
label	`string`	—	Left label
unit	`string`	—	Unit suffix for value display
width	`number`	300	Total width in px
height	`number`	40	Total height in px