Trading Charts
Trading-focused chart variants rendered live with Canvas2D. Order book depth, market heatmaps, sparklines, and gauges — purpose-built for crypto and fintech dashboards.
Depth Chart
Order book depth visualization with stepped area curves — bids (green) and asks (red) with cumulative volume.
Depth Chart - Custom Colors
Custom bid/ask colours and fill colours — style the depth chart to match your application theme.
Depth Chart - Labels + Grid
Price labels and grid lines visible — ideal for detailed order book analysis views.
Heatmap - Crypto Market
Treemap heatmap sized by market cap and coloured by 24h change — green for gains, red for losses.
Heatmap - DeFi Sector
Focused DeFi sector view — group tokens by protocol type (DEX, Lending, Oracle, Derivatives).
Heatmap - Custom Colors
Custom positive/negative/neutral colours — match your brand or theme with full control.
Sparkline
Tiny inline chart for watchlists and dashboards — auto-detects trend direction for green/red colouring.
Sparkline - Watchlist
Full watchlist card with inline sparklines per symbol — each row shows symbol, mini chart, price, and 24h change.
Sparkline - Custom Style
Fixed line and fill colours — override auto-detection for consistent branding across sparklines.
Gauge - Fear & Greed
Semi-circle gauge for the crypto Fear & Greed index — 5 colour segments from red (fear) to green (greed).
Gauge - RSI Indicator
Custom 3-segment gauge styled for RSI values — oversold (green), neutral, and overbought (red) zones.
Built for trading dashboards
Every chart above is a standalone Canvas2D component — no WebGPU required. Use DiCharts.createDepthChart() for order book visualization, DiCharts.createHeatmap() for market treemaps, DiCharts.createSparkline() for inline watchlist charts, and DiCharts.createGauge() for indicator gauges. All support live data updates and transparent backgrounds.