Gravity Bubble Chart React component
A force-based bubble chart with pointer attraction, collision separation, together/team layouts and keyboard-accessible project values.
About the Gravity Bubble Chart component
Gravity Bubble Chart groups projects into a restrained, interactive bubble field. Bubble sizes follow project values, with a minimum radius for very small items. The pointer attracts nearby bubbles, while springs and collision separation keep the field together.
When to use it
Compare effort or volume across projects and teams.
Explore a value distribution without two numeric axes.
Installation
Add the Gravity Bubble Chart component to your project with the shadcn CLI. It lands in components/gravity-bubble-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/gravity-bubble-chartProps
<GravityBubbleChart /> accepts 9 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Where the hours went" |
| subtitle | string | "Every bubble is a project. Move the pointer to pull them around." |
| items | { label: string; value: number; group: number }[] | ITEMS |
| groups | string[] | GROUPS |
| pull How strongly the pointer pulls on the bubbles. 0 turns it off. | number | 1 |
| height Height of the plot, in px. | number | 300 |
| unit Word after the value in the readout. | string | "hours" |
| formatValue | (value: number) => string | FORMAT |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Where the hours went"
- subtitlestringDefault: "Every bubble is a project. Move the pointer to pull them around."
- items{ label: string; value: number; group: number }[]Default: ITEMS
- groupsstring[]Default: GROUPS
- pull
How strongly the pointer pulls on the bubbles. 0 turns it off.
numberDefault: 1 - height
Height of the plot, in px.
numberDefault: 300 - unit
Word after the value in the readout.
stringDefault: "hours" - formatValue(value: number) => stringDefault: FORMAT
Gravity Bubble Chart FAQ
- How do I provide data?
- Pass groups and items with a unique label, a positive finite value and a valid group index. Invalid and zero-valued items are omitted. Use unit and formatValue to describe your metric.
- Can it be used without animation or a mouse?
- Reduced motion turns off the physics. Focus a bubble to read its value; arrow keys move between projects. Together and By team can also be switched with the keyboard. Set pull to zero to disable pointer attraction.
