AdaptiveChartContainer
stableResponsive wrapper that renders a full chart at desktop (≥768px) and collapses to a compact metric card with sparkline at mobile (<768px)
import { AdaptiveChartContainer } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
chartreq | ReactNode | — | Full chart component rendered at desktop breakpoint |
metricLabelreq | string | — | Label shown on the compact mobile metric card |
metricValuereq | number | — | Primary KPI value shown on mobile card |
metricFormat | NumberFormat | — | currency | rate | percent | bps | integer | decimal (default: currency) |
metricCurrency | string | — | ISO 4217 currency code |
delta | number | — | Period-over-period delta as decimal (e.g. 0.03 = +3%) |
deltaThreshold | ThresholdBreakpoints | — | Breakpoints for delta severity coloring |
sparklineData | number[] | — | Trend data points for mobile sparkline (omit to hide) |
title | string | — | Chart/card title |
asOf | string | — | As-of date string |
locale | string | — | Locale for number formatting |
chartrequiredReactNodeDefault —Full chart component rendered at desktop breakpoint
metricLabelrequiredstringDefault —Label shown on the compact mobile metric card
metricValuerequirednumberDefault —Primary KPI value shown on mobile card
metricFormatNumberFormatDefault —currency | rate | percent | bps | integer | decimal (default: currency)
metricCurrencystringDefault —ISO 4217 currency code
deltanumberDefault —Period-over-period delta as decimal (e.g. 0.03 = +3%)
deltaThresholdThresholdBreakpointsDefault —Breakpoints for delta severity coloring
sparklineDatanumber[]Default —Trend data points for mobile sparkline (omit to hide)
titlestringDefault —Chart/card title
asOfstringDefault —As-of date string
localestringDefault —Locale for number formatting
Fully adapted for mobile: renders the full chart at ≥768px and automatically collapses to a compact SparkLine + metric card at <768px. No additional mobile handling required.
This component was designed to express: