A stack of bullet charts for quarterly goals: qualitative bands, the actual bar, a target tick and last quarter's marker, with status pills that update. An Actual and Projected switch reveals hatched end-of-quarter forecasts, and lower-is-better metrics invert the scale.
npx shadcn@latest add https://hyperblur.dev/r/chart-bullet-set.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/chart-bullet-set.tsx.
import { ChartBulletSet } from "@/components/hyperblur/chart-bullet-set"
<ChartBulletSet title="Q4 scorecard" defaultMode="actual" />| Prop | Type | Default | Description |
|---|---|---|---|
| metrics | BulletMetric[] | 5 Q4 metrics | Rows with label, hint, value, target, previous, projected, three range thresholds, inverse for lower-is-better and format (currency, percent, number, hours). |
| title | string | "Q4 scorecard" | Heading above the rows. |
| period | string | "Day 58 of 92" | Subheading under the title. |
| accent | string | "#2f7bff" | Color of the actual and projected bars. |
| mode | "actual" | "projected" | Controlled mode. Pair with onModeChange. | |
| defaultMode | "actual" | "projected" | "actual" | Initial mode when uncontrolled. |
| onModeChange | (mode: "actual" | "projected") => void | Called when the switch changes. | |
| showToggle | boolean | true | Shows the Actual and Projected switch. |