AdaptiveChartContainer
Responsive wrapper that renders a full chart at desktop (≥768px) and collapses to a compact metric card with sparkline at mobile (<768px)
import { AdaptiveChartContainer } from "@danagraph/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:
Explore Related
Multi-series SVG line chart for time-series and trend data — cash forecasts, FX history, AI confidence trends
Token-native grouped/stacked bar chart (Recharts) reading DS dataviz tokens at runtime — FX volume by currency, payment counts by status, budget vs. actual, funding source stacks
Inline SVG micro-chart for trend visualization in table cells
Horizontal strip of key performance metrics with trend deltas and loading states