CandlestickGL
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.
import { CandlestickGL } from "@danagraph/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
datareq | CandlestickBar[] | — | OHLC bars with unix ms timestamps |
height | number | — | Chart height in px (default 280) |
bodyWidthRatio | number | — | Candle body width as fraction of slot 0..1 (default 0.6) |
onCrosshair | (bar: T | null) => void | — | Callback when crosshair moves over a candle |
datarequiredCandlestickBar[]Default —OHLC bars with unix ms timestamps
heightnumberDefault —Chart height in px (default 280)
bodyWidthRationumberDefault —Candle body width as fraction of slot 0..1 (default 0.6)
onCrosshair(bar: T | null) => voidDefault —Callback when crosshair moves over a candle
WebGL canvas requires min 320px. Pinch-to-zoom via pointer events works on mobile. Wrap in overflow-x-auto for very narrow viewports.
This component was designed to express:
Explore Related
GPU-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.
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.
Multi-series SVG line chart for time-series and trend data — cash forecasts, FX history, AI confidence trends