Scatter / Bubble Chart

X/Y relationship across one or more series; `sizeLabel` turns it into a bubble chart: z sets the radius on a sqrt scale from 4px to 26px, so area grows with z (not strictly in proportion, given the 4px floor).

Import

import { ScatterChart } from '@marbleui/ui'

Props

<ScatterChart>

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

Usage notes

Relationship between two numeric values, one dot per item, in one or more series. To size dots by a third value use BubbleChart; for a value over time use LineChart.

<ScatterChart
  title="Session length vs. conversion"
  summary="Conversion rises with session length on both plans; Pro converts higher at every length."
  xLabel="Minutes" yLabel="Conversion %" yFormat={(n) => `${n}%`}
  series={[{ label: 'Free', points: freeAccounts }, { label: 'Pro', points: proAccounts }]}
/>

Points are { x, y, label? }; label titles the tooltip (the series name otherwise) and fills the table’s Label column.
xLabel and yLabel are required: they caption the axes and head the table columns. xFormat and yFormat apply to ticks, tooltip and table.
Series take --chart-1…8 in order unless given a color; the legend appears only with two or more series.
The y axis starts at zero for positive data; the x axis spans only the data. Tab focuses the plot and arrow keys walk the points, series by series (Home/End jump to the ends, Escape hides); the tooltip follows and a live region reads it.

Example source · show

import { ScatterChart } from './scatter-chart'

const rnd = (seed: number) => () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280 }
const r = rnd(7)
const mk = (n: number, a: number, b: number) => Array.from({ length: n }, () => { const x = 10 + r() * 90; return { x: Math.round(x), y: Math.round(a + b * x + (r() - 0.5) * 30) } })
// Built once at module load: calling the shared generator during render would reshuffle the points on every re-render.
const plans = [{ label: 'Free', points: mk(30, 5, 0.35) }, { label: 'Pro', points: mk(30, 20, 0.5) }]
export const styles = {
  Default: () => <ScatterChart className="w-[34rem] max-w-full" title="Session length vs. conversion" summary="Conversion rises with session length for both plans; Pro converts higher at every length." xLabel="Minutes" yLabel="Conversion %" yFormat={(n) => `${n}%`} series={plans} />,
}

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

Catalog