Bullet Chart
Compare a primary measure against a target with qualitative ranges. Stephen Few's alternative to gauges and meters.
Usage
import { BulletChart } from "@chartts/react"
<BulletChart
value={270}
target={300}
ranges={[150, 225, 300]}
label="Revenue (K)"
/>Props
| Prop | Type | Description |
|---|---|---|
| value | number | Primary measure value |
| target | number | Target/goal value |
| ranges | number[] | Qualitative ranges (poor, ok, good) |
| label | string | Chart label |
| max | number | Maximum value |
Features
- Qualitative color ranges
- Target marker line
- Horizontal and vertical
- Multiple bullets in a group
- Compact KPI display
- Animated value fill
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram