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
Variants
With and without grid and axes, and different bubble sizes.
| default |
|---|
| showGrid={false} showAxis={false} sizeRange |
|---|
Figma variants
All 16 Bubble Chart cards of the Figma library, each loading the way it does on a page: the skeleton first, then the series draw themselves in. Hover a card to replay.
Type 01
Bubble Charts
Type 02
Bubble Charts
Type 03
Bubble Charts
Total Profits
Type 04
Bubble Charts
Total Profits
Type 05
Bubble Charts
Total Profits
Type 06
Bubble Charts
Type 07
Bubble Charts
Type 08
Bubble Charts
Total Profits
Type 09
Bubble Charts
Total Profits
Type 10
Bubble Charts
Total Profits
Type 11
Bubble Charts
Total Profits
Type 12
Bubble Charts
Total Profits
Type 13
Bubble Charts
Type 14
Bubble Charts
Type 15
Bubble Charts
Type 16
Bubble Charts
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.
Channel performance
Last 30 days