YieldCurveViewer

stable

Par, spot (zero), and forward yield curve viewer with inversion detection and tenor labels

Finance/Storybook ↗

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

Loading demo…

Props

Prop	Type	Default	Description
`data`req	`YieldCurvePoint[]`	—	Yield curve data points with tenor and yields
`mode`	`YieldCurveMode`	—	Which curves to show: all \| par \| spot \| forward
`curveLabel`	`string`	—	Curve identifier (e.g. USD Treasury, EUR Swap)
`showInversionAlert`	`boolean`	—	Show INVERTED CURVE alert when 2Y > 10Y

datarequired

Type YieldCurvePoint[]Default —

Yield curve data points with tenor and yields

mode

Type YieldCurveModeDefault —

Which curves to show: all | par | spot | forward

curveLabel

Type stringDefault —

Curve identifier (e.g. USD Treasury, EUR Swap)

showInversionAlert

Type booleanDefault —

Show INVERTED CURVE alert when 2Y > 10Y

Metadatasemantic type outcome space

MobileStacks / Scroll

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

Design Rationale

This component was designed to express:

View all principles →

Explore Related

DurationConvexityPanel→

Fixed-income duration and convexity metrics panel with modified duration, effective duration, convexity, and DV01

TrackingErrorGauge→

Benchmark tracking error gauge with TE budget/limit bar, utilization percentage, and severity classification

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

Was this helpful?