HorizonChart
D3-powered horizon chart for dense multi-series time-series — FX rate monitoring, cash position tracking, 10+ simultaneous series in compact lanes
import { HorizonChart } from "@danagraph/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | HorizonSeries[] | — | Array of named time-series with {t, v} data points |
width | number | — | SVG width in px (default 640) |
laneHeight | number | — | Height of each series lane in px (default 48) |
nBands | number | — | Number of opacity bands per lane (default 3) |
title | string | — | Accessible chart title |
seriesType
HorizonSeries[]Default —Array of named time-series with {t, v} data points
widthType
numberDefault —SVG width in px (default 640)
laneHeightType
numberDefault —Height of each series lane in px (default 48)
nBandsType
numberDefault —Number of opacity bands per lane (default 3)
titleType
stringDefault —Accessible chart title
Design Rationale
This component was designed to express:
Explore Related
SunburstChart→
D3-powered sunburst chart for hierarchical allocation data — fund decomposition, portfolio sector breakdown, budget hierarchy
AreaChart→
Filled area chart for cumulative and stacked treasury data — liquidity buffers, stacked funding sources
StreamGraph→
D3-powered streamgraph with wiggle offset for AUM composition over time — organic flow aesthetic for multi-category stacked area visualization
Was this helpful?