Bullet chart — Björk UI

Components•Bullet chart

Bullet chart

Quarter KPIs against their targets, one compact row each. The accent bar is the actual value from zero, the dark tick is the target, and the grey bands behind it mark poor, fair and good, with the strongest grey for poor. Mid-quarter totals carry a hatched projection to quarter end, and their status follows the projection. Latency and churn are lower-is-better, so their bands and status flip. The right column gives the value, the attainment, and a status shape that doesn't rely on colour.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/bullet-chart

How to use

import { BulletChart } from "@/components/bjork-ui/charts/bullet-chart";<BulletChart  ariaLabel="Q3 KPIs"  rows={[    {      id: "revenue",      label: "Revenue",      sublabel: "Bookings vs plan",      value: 2310000,      projected: 4610000,      target: 4800000,      ranges: [3600000, 4320000, 5400000],    },    {      id: "latency",      label: "p95 API latency",      value: 268,      target: 250,      ranges: [250, 350, 500],      better: "lower",      format: (v) => `${v} ms`,    },  ]}/>

Q3 KPIs, week 7 of 13
Metric	Actual	Target	Versus target	Projected	Band	Status
Revenue (Bookings vs plan)	$2.31M	$4.8M	48% of target	$4.61M	Poor	At risk
New logos (Closed won)	71	120	59% of target	132	Poor	On pace
Net revenue retention (Trailing 12 months)	103%	110%	94% of target	–	Fair	Off target
Gross margin (Subscription)	75.2%	78.0%	96% of target	–	Good	Near target
p95 API latency (Lower is better)	268 ms	250 ms	+18 ms vs target	–	Fair	Off target (lower is better)
Logo churn (Monthly, lower is better)	1.8%	2.0%	−0.2% vs target	–	Good	On target (lower is better)

Options

Period

Scale