synthetic
BulletGraph
A measure bar against a target tick, read against three shaded bands.
October targetsTasks, hours and Harbour progress against plan
In context
Studio dashboardOne card of KPIs
This month
Props
| Prop | Type | Required | Default |
|---|---|---|---|
measures | BulletGraphMeasure[] | Yes | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
valueFormat | ((v: number) => string) | undefined | No | (v: number) => Math.round(v).toLocaleString() |
rowHeight | number | undefined | No | 48 |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Reading it
A bar for the value, a tick for the target, and three shaded bands for poor, satisfactory and good. Each measure is scaled to its own ranges.
data-rebar-* attributes
data-rebar-component="bullet-graph" on the root <figure>; data-rebar-part="measure" per row, "measure-bar" and "target" within it.
Migrating to Ant Design
Not codemod-covered. Compose a thin Progress bar with a target-tick overlay, or adopt a dataviz library.