BumpChart

beta

D3-powered bump chart for rank changes over time — fund performance rankings, counterparty ranking shifts, quarterly peer comparison

import { BumpChart } from "@nodus/design-system/finance"

Demo coming soon

Props

Prop	Type	Default	Description
`series`	`BumpSeries[]`	—	Named series with ranked data points per period
`width`	`number`	—	SVG width in px (default 580)
`height`	`number`	—	SVG height in px (default 280)
`title`	`string`	—	Accessible chart title

series

Type BumpSeries[]Default —

Named series with ranked data points per period

width

Type numberDefault —

SVG width in px (default 580)

height

Type numberDefault —

SVG height in px (default 280)

title

Type stringDefault —

Accessible chart title

Design Rationale

This component was designed to express:

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

D3-powered streamgraph with wiggle offset for AUM composition over time — organic flow aesthetic for multi-category stacked area visualization

Portfolio vs. benchmark cumulative return comparison with excess return (alpha) display

Was this helpful?