Data & ChartsPro

Bullet Chart

Bullet chart for a measure against its target and qualitative ranges — horizontal, vertical or as a KPI list.

Usage

Quarter KPIs

Quarter KPIs, data table
name	Actual	Target	poor	ok	good
Revenue	270	250	150	225	300
Profit	22	26	20	25	30
New customers	1.7k	2.1k	1.4k	2k	2.5k

Installation

Bullet Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx

import {
  BulletChart,
  BulletChartProps,
  BulletChartVariant,
} from "@wunderui/react"

Examples

Bullet

Quarter KPIs

Quarter KPIs, data table
name	Actual	Target	poor	ok	good
Revenue	270	250	150	225	300
Profit	22	26	20	25	30
New customers	1.7k	2.1k	1.4k	2k	2.5k

Vertical Bullet

Quarter KPIs

Quarter KPIs, data table
name	Actual	Target	poor	ok	good
Revenue	270	250	150	225	300
Profit	22	26	20	25	30
New customers	1.7k	2.1k	1.4k	2k	2.5k
Satisfaction	4.6	4.4	3.5	4.3	5

Bullet List

Quarter KPIs

Quarter KPIs, data table
name	Actual	Target	poor	ok	good
Revenue	270	250	150	225	300
Profit	22	26	20	25	30
New customers	1.7k	2.1k	1.4k	2k	2.5k
Satisfaction	4.6	4.4	3.5	4.3	5
Uptime	99.4	99.9	98	99.5	100

State – Loading

Quarter KPIs

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Quota Attainment per Rep

Closed won against quota per rep.

Quota attainment

Closed won against quota, this quarter (k$)

Quota attainment, data table
name	Actual	Target	poor	ok	good
Alina Lorenz	118k	100k	60k	90k	130k
Felix Brandt	92k	100k	60k	90k	130k
Mara Jensen	76k	100k	60k	90k	130k
Jonas Becker	104k	100k	60k	90k	130k

OKR Progress

Key results, current against target.

Key results

OKR progress, data table
name	Actual	Target	poor	ok	good
Activation to 40%	34	40	20	34	48
Churn below 2%	2.4	2	1	1.7	2.4
NPS above 50	48	50	25	42.5	60

Budget vs Actual

Department spend against budget with KPI cards.

Budget

$970k

this year

Spent

$928k

96%

Over budget

Sales

+9%

Budget vs actual

Budget against actual, data table
name	Actual	Target	poor	ok	good
Marketing	$182k	$200k	$120k	$180k	$240k
Sales	$240k	$220k	$132k	$198k	$264k
R&D	$410k	$450k	$270k	$405k	$540k
Support	$96k	$100k	$60k	$90k	$120k

API Reference

Prop	Type	Default
variant	"bullet" \| "vertical-bullet" \| "bullet-list"	"bullet"
data	Record<string, unknown>[]	—
index	string	—
value	string	"value"
colors	ChartColor[]	—
height	number	280
state	"ready" \| "loading" \| "empty" \| "error"	"ready"
hiddenSeries	string[]	—
activeIndex / defaultActiveIndex	number \| null	—
valueFormatter	(v: number) => string	—
animate · animationKey	boolean · string \| number	—
target · ranges	string · string[]	"target" · ["poor", "ok", "good"]
activeIndex	number \| null	—
animate	boolean	—
animationKey	string \| number	—
className	string	—
defaultActiveIndex	number \| null	—
description	string	—
emptyDescription	string	—
emptyTitle	string	—
errorDescription	string	—
errorTitle	string	—
label	string	—
onActiveIndexChange	(index: number \| null) => void	—
onRetry	() => void	—
ranges	readonly string[]	["poor", "ok", "good"]
target	string	"target"
tooltip	boolean	—
width	number	—

Theming

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.

Variable	Used for	Default
Color
	Value	#E2E2E7
	Value	#555CF3
	Value	#FFFFFFdark #1C1D20
	Value	#A2A3A3dark #6E7078
	Fill, value	#000000dark #FFFFFF
	Fill	#454648dark #D1D1D1
	Fill	#6E6E70dark #A2A3A3

PreviousBubble Chart NextCandlestick Chart