# Chart Bullet

KPI scorecard with target versus actual and poor, fair and good ranges.

- id: `chart-bullet`
- Page: https://agentic-ui-kit.com/components/chart-bullet
- Live preview: https://agentic-ui-kit.com/live/component/chart-bullet?piece=chart-bullet

## Install

```bash
agentic-ui add chart-bullet
npx shadcn@4.17.0 add @agentic-ui/chart-bullet
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** bullet-graph, target-vs-actual, qualitative-ranges, lower-is-better, narrow-scale-min, kpi-scorecard-list, range-legend, text-alternative, dark-mode
- **Intents:** track-status, compare-over-time
- **Suits domains:** analytics, saas, finance, operations, support, hr
- **Interaction:** read-only
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** KPI scorecard with target versus actual and poor, fair and good ranges, quarterly goals list showing revenue, new customers and NPS against targets, bullet chart for support SLAs where lower response time is better, compact horizontal progress-to-target list for an executive dashboard
- **Avoid when:** a single radial KPI with threshold bands (use chart-gauge-kpi), a trend over time (use a sparkline or line chart), progress with no qualitative ranges (use a progress bar)
- **Preserve when adapting:** bullet-grammar, range-shading, text-summary
- **Replace when adapting:** items, range-labels, formatters
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives