BenchmarkComparisonChart

stable

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

Finance/Storybook ↗

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

Loading demo…

Props

Prop	Type	Default	Description
`data`req	`BenchmarkDataPoint[]`	—	Time series with period, portfolio, benchmark returns
`portfolioLabel`	`string`	—	Portfolio display name
`benchmarkLabel`	`string`	—	Benchmark display name (e.g. S&P 500)
`height`	`number`	—	Chart height in px (default 220)
`asOf`	`string`	—	As-of date string

datarequired

Type BenchmarkDataPoint[]Default —

Time series with period, portfolio, benchmark returns

portfolioLabel

Type stringDefault —

Portfolio display name

benchmarkLabel

Type stringDefault —

Benchmark display name (e.g. S&P 500)

height

Type numberDefault —

Chart height in px (default 220)

asOf

Type stringDefault —

As-of date string

Metadatasemantic type outcome space

MobileStacks / Scroll

Multi-series chart requires min 320px. Wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

TrackingErrorGauge→

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

PnLAttributionSummary→

P&L attribution breakdown by factor, desk, or strategy with diverging bar chart and totals

AttributionTable→

Performance attribution table with allocation, selection, and interaction effects

Was this helpful?