Shadcn UI Chart Card Block
ChartCard26 is a bullet chart displaying actual performance against a target with qualitative ranges. The background shows three colored zones (poor, satisfactory, good). A horizontal bar shows the actual value. A vertical marker indicates the target. Legends below explain both the values and the zones.
Light card surface with a compact horizontal bullet chart. The background uses three muted color bands: red for poor, yellow for satisfactory, green for good. The actual value bar is a solid dark color overlaying the zones. The target marker is a small triangle pointing down. Two legend rows show the actual/target values and the zone meanings.
Bullet charts pack a lot of information into a small space: actual value, target, and qualitative context. They were designed as a replacement for gauges in dashboard contexts. This implementation uses semantic colors that work in both light and dark modes. Ideal for KPI dashboards where space is limited.
The component accepts configurable ranges, target, and value props. The zones automatically scale to the max value.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
card @shadcn | Registry |