Bullet
Bullet chart with background range bands, measure bar, and target tick.
Category: chart · WCAG 2.1-AA · chart, bullet, kpi, progress, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current measure value |
target | number | — | Target marker value |
ranges | number[] | — | Qualitative range breakpoints (sorted ascending) |
label | string | — | Text label for the control. |
min | number | 0 | Minimum allowed value. |
max | number | — | Domain maximum (defaults to last range) |
width | number | 300 | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 40 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-chart-1--cascivo-color-neutral-200--cascivo-color-neutral-300--cascivo-color-neutral-400
When to use
- Showing a single measure against a target with qualitative range bands
- Compact dashboard KPIs where space for a full gauge is limited
When not to use
- Displaying a metric without a target or comparative range — use Kpi
- Showing a simple completion or rated value — use Meter
Examples
Basic bullet chart
import { Bullet } from '@cascivo/charts'
<Bullet value={72} target={80} ranges={[40, 70, 100]} label="Revenue %" />