Bubble chart
Bubble Chart
A weighted bubble chart with radial gradient fills, spring scale-in, a gentle float loop and hover values.
Bubbles are sized by value and placed from explicit coordinates or a deterministic spiral. Each uses its own radial gradient, scales in with a spring, floats continuously and exposes an accessible label.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus a bubble to enlarge it, ring it and reveal its label and value.
Usage
import { BubbleChart } from "@/registry/new-york-v4/ui/bubble-chart"
<BubbleChart data={segments} />Sales Report
Revenue weight by device segment