BacktestingChart

stable

VaR backtesting chart with P&L bars vs. VaR forecast line; breach count and color-coded exceptions

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

VaR Backtesting — 1Y

VaR99Forecast vs. Realized P&L

breaches · 2026-03-28

P&L (positive)BreachVaR99

Loading demo…

Props

Prop	Type	Default	Description
`data`req	`BacktestDataPoint[]`	—	Array of {date, realizedPnL, varForecast}
`confidenceLevel`	`string`	—	Confidence level label (default: 99)
`height`	`number`	—	Chart height in px (default: 220)

datarequired

Type BacktestDataPoint[]Default —

Array of {date, realizedPnL, varForecast}

confidenceLevel

Type stringDefault —

Confidence level label (default: 99)

height

Type numberDefault —

Chart height in px (default: 220)

MobileStacks / Scroll

Chart requires fixed minimum width for legible rendering. Wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

Expected Shortfall (CVaR) card with VaR comparison, ES/VaR multiplier, and limit utilization bar

Stress test scenario results table with impact bars, pass/warn/fail status, and worst-case callout

Was this helpful?