opinion
PackedBubbleChart
Circles sized by value and packed together with no overlaps, optionally in groups.
Budget by projectArea is the budget; hover for the figure
In context
Budget overviewWhere the money sits, and who owns it
Where the budget sitsFive projects, October
MC
Harbour rebrand
£48,200
JW
Tideline mobile
£72,900
PN
Crew interviews
£9,400
LS
Rota export
£6,150
MC
Depot signage
£21,800
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | PackedBubbleItem[] | Yes | — |
grouped | boolean | undefined | No | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
height | number | undefined | No | 400 |
valueFormat | ((v: number) => string) | undefined | No | (v: number) => Math.round(v).toLocaleString() |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
data-rebar-* attributes
data-rebar-component="packed-bubble-chart" on the root <figure>; data-rebar-part="mark" per circle, "group" on a cluster boundary in grouped mode.
Migrating to Ant Design
Not codemod-covered — AntD ships no chart components of its own; a migration typically adopts a dedicated circle-packing library (e.g. d3-hierarchy's pack layout) directly.