One value against a target, on top of bands that say if it is good or bad. Use it for a KPI that has a goal, such as revenue against quota.
It is plain HTML, so it does not need any extra package.
The bar is the value, the line is the target and each item of ranges is a band that ends at its own value.
Set color on a range, and barColor for the bar. Without colors, the bands are shades of the theme gray.
Set orientation to vertical and give the track a height.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | the current value | number | - | - |
| target | draw a marker at this value | number | - | - |
| ranges | the bands, each one ends at its value | BulletRange[] | BulletRange | - |
| min | where the scale starts | number | - | 0 |
| orientation | direction of the chart | string | 'horizontal', 'vertical' | horizontal |
| size | thickness of the track, in pixels | number | - | 28 |
| barSize | thickness of the bar, in pixels | number | - | a third of size |
| height | height of the track when vertical, in pixels | number | - | 200 |
| type | theme color of the bar | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | primary |
| barColor | any CSS color for the bar, replaces type | string | - | - |
| targetColor | color of the target marker | string | - | theme color |
| label | content shown above the chart | ReactNode | - | - |
| valueFormatter | how a number is written | (value: number) => string | - | thousands separators, en-US |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type BulletRange = {
value: number // where the band ends, it starts where the one before ends
color?: string // any CSS color, a shade of gray when missing
label?: string // listed below the chart
}
The ref points at the root div.
With aria-label or aria-labelledby the root is a meter that exposes the value, the range and a text such as "270, target 250". Without a name it is plain content, because a meter needs one.
Bands are colors, so give each range a label to list what it means as text.