WebGLChartProvider
stableShared 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.
import { WebGLChartProvider } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenreq | ReactNode | — | Chart components that consume useWebGLChart() |
childrenrequiredReactNodeDefault —Chart components that consume useWebGLChart()
Context provider — no visual output. Canvas charts inside inherit the GPU context.
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 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 price-at-volume histogram. Two color modes: 'heat' (5-stop vol intensity ramp from dataviz tokens) and 'delta' (buy/sell stacked bars). POC label. Real-time updates via DYNAMIC_DRAW.
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).