Bubble Chart

Bubble chart: scatter with a third value as bubble size, radius on a sqrt scale (4px floor to 26px) so area tracks the value.

Import

import { BubbleChart } from '@marbleui/ui'

Props

<BubbleChart>

Prop	Type	Default
series *required	`ScatterSeries[]`	`—`
sizeLabel *required	`string`	`—`
summary *required	`string`	`—`
xLabel *required	`string`	`—`
yLabel *required	`string`	`—`
className	`string`	`—`
height	`number`	`—`
title	`string`	`—`
xFormat	`(n: number) => string`	`—`
yFormat	`(n: number) => string`	`—`

Usage notes

Scatter plot where a third value sets bubble size. It is ScatterChart with sizeLabel required; without a third value use ScatterChart.

<BubbleChart
  title="Markets: share vs. growth"
  summary="The US has the most customers but the slowest growth; Canada grows faster on a smaller base."
  xLabel="Market share %" yLabel="Growth %" sizeLabel="Customers" yFormat={(n) => `${n}%`}
  series={[{ label: 'Americas', points: [{ x: 70, y: 9, z: 9100, label: 'United States' }, { x: 38, y: 16, z: 1500, label: 'Canada' }] }]}
/>

z maps to a 4–26px radius on a square-root scale, so size grows with the value (area isn’t strictly proportional because of the 4px floor) and zero still draws a small bubble. It has no formatter and always shows in compact form (9.1K).
Bubbles carry no text, so give each point a label: it titles the tooltip and fills the “Show data” table, which adds a sizeLabel column.
Bubbles are 55% opaque so overlaps show. Keyboard works as in ScatterChart: Tab into the plot, arrow keys walk the bubbles, and the size value is in the tooltip and the announcement.

Example source · show

import { BubbleChart } from './bubble-chart'

const regions = [
  { label: 'EMEA', points: [{ x: 42, y: 18, z: 1200, label: 'Netherlands' }, { x: 55, y: 12, z: 3400, label: 'Germany' }, { x: 30, y: 22, z: 800, label: 'Sweden' }] },
  { label: 'Americas', points: [{ x: 70, y: 9, z: 9100, label: 'United States' }, { x: 38, y: 16, z: 1500, label: 'Canada' }, { x: 25, y: 28, z: 900, label: 'Brazil' }] },
  { label: 'APAC', points: [{ x: 48, y: 24, z: 2100, label: 'Japan' }, { x: 22, y: 34, z: 600, label: 'Singapore' }] },
]
export const styles = { Default: () => <BubbleChart className="w-[34rem] max-w-full" title="Markets: share vs. growth" summary="The US has the most customers and the highest share but the slowest growth; Singapore grows fastest." xLabel="Market share %" yLabel="Growth %" sizeLabel="Customers" yFormat={(n) => `${n}%`} series={regions} /> }

Source: packages/ui/src/bubble-chart/bubble-chart.tsx

Catalog