DepthChartGL
stableGPU-accelerated order book depth visualization. Bid (temporal blue) and ask (agency red) cumulative depth curves as filled triangle-strip areas with smooth line borders. Animates live via rAF.
import { DepthChartGL } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
bidsreq | DepthLevel[] | — | Cumulative bid levels (price, size) |
asksreq | DepthLevel[] | — | Cumulative ask levels (price, size) |
midPrice | number | — | Mid-price label override |
height | number | — | Chart height in px (default 200) |
onHover | (price: number | null) => void | — | Callback with hovered price |
bidsrequiredDepthLevel[]Default —Cumulative bid levels (price, size)
asksrequiredDepthLevel[]Default —Cumulative ask levels (price, size)
midPricenumberDefault —Mid-price label override
heightnumberDefault —Chart height in px (default 200)
onHover(price: number | null) => voidDefault —Callback with hovered price
Depth chart requires min 280px for bid/ask labels. On mobile, consider reducing the price range shown.
This component was designed to express:
Explore Related
GPU-accelerated OHLC candlestick chart via WebGL2 (fallback WebGL1). Renders 50k+ candles at 60fps. Hardware-accelerated zoom/pan, crosshair tooltip, bull/bear coloring from DS semantic tokens.
GPU-accelerated order flow tape — trades as circular GL_POINTS on a price-over-time scatter. Dot radius scales with quantity. Buy = outcome-positive green, sell = agency red. Ring buffer for real-time streams (default 2000 trades).
Shared infrastructure for GPU-accelerated charts — CSS token bridge (CSS custom property → WebGL RGBA uniform), animation frame scheduler, and WebGL context factory. Wrap once at dashboard level.
Depth-of-market order book with bid/ask columns and cumulative volume bars