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 | SVG width in px. **This chart is fixed-width by default** — it is a compact, inline chart meant to sit in a table cell or beside a label, so omitting `width` gives you 300px rather than a container-filling chart. Pass a number to change it. The catalogue-wide "omit for a responsive chart" note does not apply to this chart. |
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-gray-200--cascivo-gray-300--cascivo-gray-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 %" />