Bullet ChartProv1.0.0
Actual against target, one row per measure, over bands that say what good looks like. Each row has its own scale, so revenue, NPS and response time can share one card; the share of target is written at the end of every row.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-bullet-chartNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { BulletChart } from "@/components/ui/lumen/charts/bullet-chart";
const kpis = [
{ kpi: "revenue", actual: 412, target: 450, bands: [300, 400, 500] },
{ kpi: "nps", actual: 48, target: 40, bands: [20, 35, 60] },
{ kpi: "activation", actual: 61, target: 70, bands: [40, 60, 100] },
];
const config = {
revenue: { label: "Revenue ($k)", color: "var(--chart-1)" },
nps: { label: "NPS", color: "var(--chart-2)" },
activation: { label: "Activation (%)", color: "var(--chart-3)" },
};
export function QuarterScorecard() {
return <BulletChart data={kpis} name="kpi" value="actual" target="target" bands="bands" config={config} label="Quarter scorecard" />;
}Props
data / name / value / target–Row[] / field / field / fieldOne row per measure: its name, the actual value and (optionally) its target.
bands–field | number[]Upper edges of the bands, low to high: a field holding an array per row, or one array for every row.
bandLabels["Poor", "Fair", "Good"]string[]Band names, low to high, used in the table and the words.
max–field | numberEach row's scale end. Default: the largest band, value or target, rounded up.
direction"up""up" | "down"down: less is better (costs, latency); the bands and 'met' read the other way.
config–ChartConfigColour and label per row name. Unlisted rows take the series colours in order.
Show all 12 propsShow fewer
valueFormat–StatFormat | (n) => stringNumbers in the rows, table and summary.
active / onActiveChange / onSelect–string | null / (name) => void / (name) => voidThe focused row, controlled; and a row was clicked or Enter pressed.
labels–{ ofTarget?, noData? }Words for i18n.
rowHeight44numberHeight of one row in px.
motion"full""full" | "subtle" | "off"Bars grow in, row by row; reduced motion always wins.
loading / error / emptyText / label–boolean / string / string / stringStates in words with the height held, and the chart's accessible name.
Source
components/ui/lumen/charts/bullet-chart.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
