Stat Bullet
A horizontal bullet chart with actual value bar, target marker, and qualitative range zones for KPI-to-target tracking.
Installation
$ npx shadcn@latest add @orecus/stat-bulletDependencies:
motion
Registry:
skeleton@orecus/color-utils@orecus/card@orecus/header@orecus/use-reduced-motion@orecus/use-animated-number
Component
Horizontal bullet charts with targets and different sizes.
Revenue
Goal: 90
Active Users
Target: 50K
Sales Volume
Goal: 180
Completion Rate
Based on last 30 days
Customer Satisfaction
Goal: 75%
NPS Score
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | Current/actual value |
max | number | 100 | Scale maximum |
label* | string | — | Label text |
color | ThemeColor | 'primary' | Bar color |
target | number | — | Target marker position |
targetLabel | string | — | Label for target (e.g., 'Goal') |
ranges | { value: number; color: ThemeColor; label?: string }[] | — | Background qualitative range zones sorted ascending |
showValue | boolean | true | Show value text |
formatValue | (value: number, max: number) => string | — | Custom format function for displayed value |
description | ReactNode | — | Additional description text |
size | 'sm' | 'md' | 'lg' | 'md' | Bar height preset |
variant | 'default' | 'gradient' | 'default' | Bar fill style |
animated | boolean | false | Animate bar width on mount |
glow | boolean | false | Glow effect on feature bar |
animateValue | boolean | true | Number counting animation |
loading | boolean | false | Shows skeleton loading state |
cardProps | CardProps | — | Props to pass to the Card wrapper |
className | string | — | Additional CSS classes |