Skip to content

ScatterChart

stable

Token-native multi-series scatter/bubble chart (Recharts) with optional z-dimension bubble sizing — risk/return scatter, VaR vs. exposure, FX spread vs. volume, counterparty clustering

Finance/Storybook ↗
import { ScatterChart } from "@nodus/design-system/finance"
Loading demo…

Props

seriesrequired
Type ScatterSeries[]Default —

Series — {label, data: {x, y, z?, name?}[], color?}; z maps to bubble size

title
Type stringDefault —

Chart title

asOf
Type stringDefault —

As-of date shown right of the title

xLabel
Type stringDefault —

X-axis label

yLabel
Type stringDefault —

Y-axis label

height
Type numberDefault 260

Chart height in px

showGrid
Type booleanDefault true

Show grid lines

zRange
Type [number, number]Default [40, 400]

Bubble area range mapped from the z dimension

ariaLabel
Type stringDefault —

Accessible label override (falls back to title)

style
Type CSSPropertiesDefault —

Style override

Accessibility

  • Wrapper renders role="group" labelled from ariaLabel ?? title.
  • Series colors come from the DS categorical dataviz palette and re-resolve on theme change.
  • Provide xLabel/yLabel axis labels — they render inside the plot and give the axes meaning for all users.
semantictypeborderdataviz
MobileStacks / Scroll

Scatter chart requires min 300px. Wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

Explore Related

ScatterPlot→

Two-dimensional scatter plot for correlation and distribution — risk vs. return, exposure vs. limit

BarChart→

Token-native grouped/stacked bar chart (Recharts) reading DS dataviz tokens at runtime — FX volume by currency, payment counts by status, budget vs. actual, funding source stacks

LineChart→

Multi-series SVG line chart for time-series and trend data — cash forecasts, FX history, AI confidence trends

Was this helpful?