LineChart
Multi-series SVG line chart for time-series and trend data — cash forecasts, FX history, AI confidence trends
import { LineChart } from "@danagraph/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
datareq | Record<string, number | string>[] | — | Data rows |
xKeyreq | string | — | Key for x-axis labels |
yKeyreq | string | string[] | LineSeries[] | — | Series key(s) to plot |
title | string | — | Chart title |
height | number | — | SVG height in px (default 200) |
showGrid | boolean | — | Show horizontal grid lines |
showLegend | boolean | — | Show series legend |
severityColored | boolean | — | Color first series by trend severity |
bandLowKey | string | — | Key for confidence band lower bound |
bandHighKey | string | — | Key for confidence band upper bound |
datarequiredType
Record<string, number | string>[]Default —Data rows
xKeyrequiredType
stringDefault —Key for x-axis labels
yKeyrequiredType
string | string[] | LineSeries[]Default —Series key(s) to plot
titleType
stringDefault —Chart title
heightType
numberDefault —SVG height in px (default 200)
showGridType
booleanDefault —Show horizontal grid lines
showLegendType
booleanDefault —Show series legend
severityColoredType
booleanDefault —Color first series by trend severity
bandLowKeyType
stringDefault —Key for confidence band lower bound
bandHighKeyType
stringDefault —Key for confidence band upper bound
MobileStacks / Scroll
Chart requires min 300px. Wrap in overflow-x-auto.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?