RiskHeatmap

stable

Two-dimensional risk heatmap grid with severity-colored cells

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

Portfolio Risk Heatmap

Loading demo…

Props

Prop	Type	Default	Description
`rows`req	`string[]`	—	Row labels
`columns`req	`string[]`	—	Column labels
`values`req	`number[][]`	—	Cell values matrix
`breakpoints`	`ThresholdBreakpoints`	—	Custom severity breakpoints
`label`	`string`	—	Heatmap title

rowsrequired

Type string[]Default —

Row labels

columnsrequired

Type string[]Default —

Column labels

valuesrequired

Type number[][]Default —

Cell values matrix

breakpoints

Type ThresholdBreakpointsDefault —

Custom severity breakpoints

label

Type stringDefault —

Heatmap title

MobileStacks / Scroll

Heatmap requires min 320px for legible cells. Wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

Multi-factor exposure heatmap across time periods with threshold-based coloring

Portfolio concentration risk breakdown with exposure bars and limit indicators

Was this helpful?