BulletChart

Goal-attainment rows: each datum is a leading label, a track holding qualitative background bands (ranges, ascending bounds in fading washes), the tone-colored measure bar, an optional vertical target tick, and the trailing formatted value.
Following the classic bullet-graph anatomy each row carries its own scale, since goals rarely share units; pass max to force one shared scale when they do. The compact alternative to a dashboard of gauges: five goals read in five rows.
Q3 targets
iOS
Q3 targets
Android
Q3 targets
Web
tsx
<BulletChart
title="Q3 targets"
data={[
{ label: "Revenue", value: 275, target: 300, ranges: [200, 350, 500] },
{ label: "Profit", value: 42, target: 35, ranges: [30, 50, 70] },
{ label: "NPS", value: 61, target: 70, ranges: [40, 60, 80] },
]}
/>

Props

Prop
Description
data
required
BulletDatum[]
The rows to render, in order, each on its own scale.
title
string
Optional heading shown above the rows.
max
number
Force one scale maximum shared by every row (only when the rows share a unit). Omit for the default per-row scale: each row's largest value, target, or range bound.
success
boolean
Measure tone (pick one; default primary). Precedence: success > destructive.
destructive
boolean
Measure tone (pick one; default primary). Precedence: success > destructive.
compact
boolean
Density (omit for the default row spacing).
formatValue
(v: number) => string
Formats row values (data formatting, not styling).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

BulletChart

Don’t
A bare progress bar per goal loses the target, the qualitative bands, and the shared scale that makes rows comparable.
Do
Q3 targets
Give every goal its row, with the target as a tick and the qualitative context as bands.
← BoxPlot
CandlestickChart →