Data & Charts
Bubble Chart
A scatter plot where marker size encodes a third dimension of the data.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { BubbleChart } from "@wunderui/react"Examples
Default
Visits against revenue, the bubble size from the number of deals.
Without grid and axes
Only the bubbles, drawn larger (sizeRange).
Type 01
All 16 Bubble Chart cards of the Figma library, one per box, each loading the way it does on a page: the skeleton first, then the series draw themselves in. Replay brings the loading state back.
Type 02
Type 03
Type 04
Type 05
Type 06
Type 07
Type 08
Type 09
Type 10
Type 11
Type 12
Type 13
Type 14
Type 15
Type 16
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Channel performance
Visits against revenue per channel; bubble size shows the deals closed.