Skip to content

ScatterChart

Dots on two numeric axes. Page-weight timings below are honest sample data, rendered as a static SVG with no scripts.

Page weight vs load time

Scatter chart, 8 points, x Bundle size (KB) 0 to 100, y Load time (ms) 0 to 800Static scatter chart of Scatter chart. Points read against the Bundle size (KB) and Load time (ms) axes.0200400600800020406080100Bundle size (KB)Load time (ms)font pack24, 240hero image41, 29052, 420video embed71, 56084, 690
<ScatterChart points={weight} xLabel="Bundle size (KB)" yLabel="Load time (ms)" />

Custom size

Pass width and height to resize the viewBox.

API timings, 5 points, x Payload (KB) 0 to 20, y P99 (ms) 0 to 300Static scatter chart of API timings. Points read against the Payload (KB) and P99 (ms) axes.05010015020025030005101520Payload (KB)P99 (ms)auth5, 90search14, 21020, 260
<ScatterChart label="API timings" points={api} xLabel="Payload (KB)" yLabel="P99 (ms)" width={560} height={280} />

Props

PropTypeDefaultDescription
pointsArray<{ x: number; y: number; label?: string }>-Dots in document order.
widthnumber560viewBox width; the SVG scales to 100%.
heightnumber320viewBox height.
xLabelstring"x"Horizontal axis name; used in the auto-summary.
yLabelstring"y"Vertical axis name; used in the auto-summary.
labelstring"Scatter chart"Chart name; opens the auto-summary.
classstring-Style passthrough.

Static honesty

Static SVG, no scripts. Axis domains come from the data extent (floored minimum to ceiled maximum) expanded through niceTicks with a count of 5, so the printed range may extend past the outer dots. Points without a label fall back to an"x, y" coordinate title.

Accessibility