BulletChart
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
Displays a value against a target and qualitative ranges using SVG fill patterns.
Import
import { BulletChart } from "~lib/data-display/bullet-chart";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
value | number | Yes | N/A | Current value to display |
target | number | No | N/A | Target marker position |
ranges | { end: number; pattern: PatternType; label?: string }[] | Yes | N/A | Qualitative range bands |
min | number | No | 0 | Minimum scale value |
max | number | No | 100 | Maximum scale value |
label | string | No | N/A | Label shown to the left of the bar |
width | number | string | No | 100% | Container width |
height | number | string | No | 100% | Container height |