Interactive Examples - diCharts Demo

Interactive Examples

Every chart on this page is rendered live using the DiCharts SDK. Scroll down to explore 8 chart styles, 11 indicators, and 6 dashboard components.

8
Chart Styles
Candle, Bar, Line, Area, Baseline, Hollow, Heikin-Ashi, Renko
100K+
Candles at 60fps
WebGPU GPU-accelerated rendering
11
Built-in Indicators
SMA, EMA, Bollinger, VWAP, Ichimoku, RSI, MACD, Stochastic, ATR, OBV, ADX
0
Dependencies
Pure TypeScript, framework-agnostic

Full-Screen Demos

Open in a dedicated view for maximum chart space.

Standard Chart

Interactive OHLC chart with 8 candle styles, theme switching, volume bars, and order lines — powered by the DiCharts SDK via CDN.

WebGPU8 StylesOrder LinesSDK

Chart Components

Standalone Canvas2D dashboard components: Depth Chart, Heatmap, Sparklines, Donut Chart, Bar Chart, and Gauge with live simulated updates.

Canvas2D6 ComponentsLive Updates

Advanced Trading

Full trading platform demo with real-time tick streaming, all indicators, chart styles, zoom/pan controls, and theme switching via the SDK widget.

WebGPULive StreamingAll FeaturesSDK

Bookmap / Order Flow

Bookmap-style liquidity heatmap with real-time order book depth visualization, volume dots, volume profile, and price line — simulated BTC/USD microstructure.

Canvas2DOrder FlowLive SimulationHeatmap

Order Flow Heatmap (ATAS)

ATAS-style order flow heatmap with DOM ladder, OHLC candle overlay, volume profile, and footprint data — full-screen simulated BTC/USD market.

Canvas2DDOM LadderCandlesFootprint

Liquidation Heatmap

Predicted liquidation clusters for leveraged positions — glowing magenta/cyan bands showing where cascading liquidations will trigger, with magnetic price pull dynamics.

Canvas2DLiquidation ZonesLive Simulation

Dark Pool / Block Trades

Classified radar-screen visualization of hidden institutional block trades with connection webs, cumulative flow indicators, and institutional print summaries.

Canvas2DDark PoolInstitutional Flow

Gamma Exposure (GEX)

Options dealer gamma exposure across strike prices — GEX flip zone, call/put walls, and net gamma curve showing where market makers are forced to hedge.

Canvas2DOptions FlowDealer Positioning

Market Profile (TPO)

CME pit-trader style Time Price Opportunity chart with developing profile, Value Area, Point of Control, and Initial Balance — building letter by letter.

Canvas2DTPOValue AreaPOC

Cumulative Delta + Absorption

ECG-style market pulse showing cumulative volume delta, absorption detection, exhaustion markers, and divergence alerts — aggressive buyer vs seller flow.

Canvas2DCVDAbsorptionMicrostructure

Chart Styles

8 rendering styles — from classic candlesticks to baseline comparisons.

Classic

Candlestick

Hollow

Candlestick

Heikin-Ashi

Candlestick

Renko

Candlestick

Bar (OHLC)

Series

Line

Series

Area

Series

Baseline

Series

Technical Indicators

5 overlay indicators on the price chart and 6 oscillators in dedicated sub-panes.

SMA (20)

Overlay

EMA (9)

Overlay

Bollinger Bands

Overlay

VWAP

Overlay

Ichimoku Cloud

Overlay

RSI (14)

Oscillator

MACD (12, 26, 9)

Oscillator

Stochastic (14)

Oscillator

ATR (14)

Oscillator

OBV

Oscillator

ADX (14)

Oscillator

Dashboard Components

6 standalone Canvas2D components — no WebGPU required, works in all browsers.

Depth Chart

Order Book

Sparklines

Watchlist
BTC
$42,580.50+2.34%
ETH
$2,285.12-1.12%
SOL
$98.45+5.67%
BNB
$312.88+0.89%
XRP
$0.62-0.45%
ADA
$0.58+3.21%

Market Heatmap

Treemap

Portfolio Allocation

Donut / Pie

Daily PnL

Bar Chart

Fear & Greed Index

Gauge

What You're Looking At

Every demo on this page is powered by the same library you'll ship in production.

WebGPU Rendering Engine

The candlestick chart runs entirely on the GPU via WebGPU. Geometry is batched into a single draw call, so 100K+ candles render at a locked 60fps.

Canvas2D Dashboard Components

Depth Chart, Heatmap, Sparklines, Donut, Bar Chart, and Gauge are standalone Canvas2D widgets that work in every browser with zero GPU requirements.

Real-Time Streaming Engine

A built-in tick aggregation engine accepts raw trades from your WebSocket, bins them into OHLC candles for any timeframe, and pushes updates to the chart.

Technical Indicators

SMA, EMA, Bollinger Bands, VWAP, Ichimoku Cloud, RSI, MACD, Stochastic, ATR, OBV, and ADX — 11 indicators computed alongside price data with no jank.

Browser Compatibility

The WebGPU candlestick engine works in Chrome, Edge, Firefox, and Safari (all modern versions). Dashboard components (Depth Chart, Heatmap, Sparklines, etc.) use Canvas2D and work in every browser.

Ship better charts. Ship them faster.

Start with the free Community Edition today.