BulletChart
Displays a measure against qualitative ranges and a target marker.
Component behavior
BulletChart displays a horizontal value bar, an optional target marker, and qualitative range bands. Multiple entries render as stacked rows.
Use cases
- Metrics compared against individual targets.
- Compact horizontal gauges for stacked scorecards.
- Progress against a target with qualitative ranges.
Alternatives
Gauge: the task requires a radial gauge.
Meter: one value is compared with capacity, without a target or ranges.
RadarChart: several metrics share a scale for multivariable comparison.
Props
Each BulletDatum is one row: a value for the bar, an optional target marker, and optional ranges that split [0, max] into qualitative bands shaded lightest to darkest. Every row scales independently, so mixed units stack cleanly.
| Prop | Type | Default | Description |
|---|---|---|---|
items | BulletDatum[] | — | Rows, each with a label, value, optional sublabel, target, ascending band boundaries (ranges), max, and tone/color for the bar. |
formatValue | (value: number) => string | — | Formats the value printed at the end of each row. |
showValue | boolean | true | Print the numeric value at the end of each row. |
labelWidth | number | 116 | Width of the label column in pixels. |
Examples
KPI scorecard
import { BulletChart } from "@solarius/onset";
import type { BulletDatum } from "@solarius/onset";