ContourDensityChart
D3-powered 2D contour density chart for return distribution — bimodal clusters, alpha factor scatter, risk-return frontiers, option payoff density
import { ContourDensityChart } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | DensityPoint[] | — | Array of {x, y, label?} data points |
xLabel | string | — | X-axis label (default: 'Return (%)') |
yLabel | string | — | Y-axis label (default: 'Volatility (%)') |
bandwidthX | number | — | KDE bandwidth in x direction (auto-derived if omitted) |
bandwidthY | number | — | KDE bandwidth in y direction (auto-derived if omitted) |
thresholds | number | — | Number of density iso-level contours (default: 10) |
colorScale | 'seqBlue' | 'seqRed' | 'seqNeutral' | — | Sequential color ramp (default: seqBlue) |
showPoints | boolean | — | Overlay raw scatter points (default: true) |
width | number | — | SVG width in px (default 560) |
height | number | — | SVG height in px (default 380) |
title | string | — | Accessible chart title |
dataDensityPoint[]Default —Array of {x, y, label?} data points
xLabelstringDefault —X-axis label (default: 'Return (%)')
yLabelstringDefault —Y-axis label (default: 'Volatility (%)')
bandwidthXnumberDefault —KDE bandwidth in x direction (auto-derived if omitted)
bandwidthYnumberDefault —KDE bandwidth in y direction (auto-derived if omitted)
thresholdsnumberDefault —Number of density iso-level contours (default: 10)
colorScale'seqBlue' | 'seqRed' | 'seqNeutral'Default —Sequential color ramp (default: seqBlue)
showPointsbooleanDefault —Overlay raw scatter points (default: true)
widthnumberDefault —SVG width in px (default 560)
heightnumberDefault —SVG height in px (default 380)
titlestringDefault —Accessible chart title
Contour density chart requires min 400px for axis labels and legend. Wrap in overflow-x-auto on narrow viewports.
This component was designed to express:
Explore Related
Two-dimensional scatter plot for correlation and distribution — risk vs. return, exposure vs. limit
D3-powered choropleth map for geographic exposure visualization — regional treasury allocation, counterparty country risk, AUM by geography, FX exposure
Strike × tenor implied volatility heatmap with 5-stop vol ramp, contour borders, and hover tooltip showing exact IV%