Beeswarm chart

Pro

Every value as its own dot along one axis, packed so none overlap. Splitting by group moves each dot into its lane, so you watch the groups separate.

Installs components/ui/beeswarm-chart.tsxDepends on d3-shapeMotion shared motion tokens

pnpm dlx shadcn@latest add @caliper/beeswarm-chart

Closed deals by annual value ($k)

Closed deals by annual value ($k)
Item	Group	Value
Deal 1055	Small business	4
Deal 1064	Small business	4
Deal 1046	Small business	5
Deal 1073	Small business	5
Deal 1082	Small business	5
Deal 1091	Small business	5
Deal 1115	Small business	5
Deal 1124	Small business	5
Deal 1100	Small business	6
Deal 1106	Small business	6
Deal 1097	Small business	7
Deal 1109	Small business	7
Deal 1118	Small business	7
Deal 1040	Small business	8
Deal 1079	Small business	8
Deal 1088	Small business	8
Deal 1127	Small business	8
Deal 1049	Small business	9
Deal 1070	Small business	9
Deal 1052	Small business	10
Deal 1058	Small business	10
Deal 1061	Small business	10
Deal 1067	Small business	10
Deal 1043	Small business	11
Deal 1076	Small business	11
Deal 1085	Small business	11
Deal 1094	Small business	11
Deal 1121	Small business	11
Deal 1103	Small business	12
Deal 1112	Small business	12
Deal 1044	Mid-market	18
Deal 1113	Mid-market	18
Deal 1122	Mid-market	18
Deal 1053	Mid-market	19
Deal 1104	Mid-market	19
Deal 1095	Mid-market	20
Deal 1062	Mid-market	21
Deal 1086	Mid-market	22
Deal 1071	Mid-market	23
Deal 1077	Mid-market	24
Deal 1080	Mid-market	26
Deal 1068	Mid-market	27
Deal 1089	Mid-market	29
Deal 1059	Mid-market	30
Deal 1098	Mid-market	32
Deal 1050	Mid-market	34
Deal 1107	Mid-market	35
Deal 1128	Mid-market	36
Deal 1041	Mid-market	37
Deal 1116	Mid-market	38
Deal 1119	Mid-market	39
Deal 1125	Mid-market	41
Deal 1110	Mid-market	42
Deal 1047	Mid-market	43
Deal 1101	Mid-market	44
Deal 1056	Mid-market	45
Deal 1092	Mid-market	45
Deal 1065	Mid-market	46
Deal 1074	Mid-market	46
Deal 1083	Mid-market	46
Deal 1084	Enterprise	53
Deal 1093	Enterprise	53
Deal 1102	Enterprise	55
Deal 1075	Enterprise	56
Deal 1111	Enterprise	58
Deal 1066	Enterprise	60
Deal 1120	Enterprise	64
Deal 1057	Enterprise	66
Deal 1042	Enterprise	70
Deal 1129	Enterprise	71
Deal 1048	Enterprise	74
Deal 1051	Enterprise	78
Deal 1126	Enterprise	81
Deal 1060	Enterprise	87
Deal 1117	Enterprise	91
Deal 1069	Enterprise	96
Deal 1108	Enterprise	100
Deal 1078	Enterprise	106
Deal 1099	Enterprise	109
Deal 1087	Enterprise	115
Deal 1090	Enterprise	118
Deal 1096	Enterprise	123
Deal 1081	Enterprise	125
Deal 1105	Enterprise	129
Deal 1072	Enterprise	132
Deal 1114	Enterprise	134
Deal 1063	Enterprise	136
Deal 1123	Enterprise	138
Deal 1045	Enterprise	139
Deal 1054	Enterprise	139

When to use #

Use it for

Deal sizes, response times or salaries where each item matters.
Up to a few hundred items.

Skip it when

Thousands of values; use the histogram.
Values over time; use a line or scatter chart.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/beeswarm-chart

Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from swarmOffsets and BeeswarmChart.

example.tsx

import { swarmOffsets, BeeswarmChart } from "@/components/ui/beeswarm-chart"

The worked example comes with Pro

The 12-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

swarmOffsets

component

No props of its own; it accepts the native props of its root element.

BeeswarmChart

component

PropTypeDefault

label *string—

points *readonly SwarmPoint[]—

categories *readonly ChartSeries[]—

unitstring""

formatValue((value: number) => string)numberText

radiusnumber4.5

loadingboolean—

errorstring—

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.