BulletChart

Chart
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.
src/charts/bullet-chart
View in Charts

Playground

Every control sets a real prop of BulletChartProps. The JSX below updates as you go.
Q3 targets
Props
Tone
pick one
compact
boolean
JSX · BulletChartProps
<BulletChart />

Variants

2 examples from src/charts/bullet-chart/bullet-chart.md, each rendered live from its own JSX.
Success tone
<BulletChart
success
data={[
{ label: "Web", value: 34, target: 30 },
{ label: "iOS", value: 18, target: 24 },
{ label: "Android", value: 21, target: 24 },
]}
/>
Compact
<BulletChart
compact
data={[
{ label: "Compute", value: 8200, target: 10000, ranges: [6000, 10000, 14000] },
{ label: "Storage", value: 4100, target: 5000, ranges: [3000, 5000, 8000] },
]}
/>

Anatomy

Q3 targets
1
Frame
2
Measure
3
Target marker
4
Ranges
Dimmed parts appear only in some states or variants.

Props

11 props on BulletChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
3 props
data *
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.
Measure tone
pick one
2 props
success
boolean
false
destructive
boolean
false
Density
6 props
compact
boolean
false
detailed
boolean
false
Expanded goal rows with inset markers and a qualitative-band key.
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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] },
]}
/>
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.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--fd
--fm
--ft
--ln
--sf
--sf2
--sf3
--sf4
--sh-sm
--tx
--tx2
--tx3

Related components