VolatilitySurface
Strike × tenor implied volatility heatmap with 5-stop vol ramp, contour borders, and hover tooltip showing exact IV%
import { VolatilitySurface } from "@danagraph/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
datareq | VolPoint[] | — | Vol surface data points (strike, tenor, vol) |
strikes | string[] | — | Explicit strike order |
tenors | string[] | — | Explicit tenor order |
title | string | — | Chart title |
asOf | string | — | As-of date string |
cellSize | number | — | Cell size in pixels (default: 44) |
showContours | boolean | — | Show contour borders between vol zones (default: true) |
datarequiredType
VolPoint[]Default —Vol surface data points (strike, tenor, vol)
strikesType
string[]Default —Explicit strike order
tenorsType
string[]Default —Explicit tenor order
titleType
stringDefault —Chart title
asOfType
stringDefault —As-of date string
cellSizeType
numberDefault —Cell size in pixels (default: 44)
showContoursType
booleanDefault —Show contour borders between vol zones (default: true)
Design Rationale
This component was designed to express:
Explore Related
HeatmapChart→
Token-native SVG cell-matrix heatmap with sequential (red/blue/neutral) and diverging color scales from DS dataviz tokens — correlation matrices, factor exposure grids, settlement timing, risk concentration
FXOptionPricer→
FX option pricing summary with Greeks display
OptionsPricingCard→
Black-Scholes / Black-76 / Binomial options pricer: model inputs, live premium output, put/call toggle, and full Greeks breakdown
Was this helpful?