Skip to main content
Back to Documentation

Charting

OpenTrade’s chart workspace (/chart) is built with Pixi.js for responsive candlestick rendering, drawings, and strategy overlays.

Opening a chart

  1. Go to Chart after sign-in
  2. Create a new layout or restore your last workspace
  3. Select exchange, trading pair, and timeframe
  4. Use the right sidebar for indicators, strategies, layers, and alerts

Deep links like /chart/{exchange}/{symbol}/{timeframe} resolve to a saved layout automatically.

What you can do today

Candlestick charts

  • Multiple timeframes (exchange-dependent; common: 1m–1d)
  • Live updates over WebSocket after historical load
  • Volume on the main pane where supported

Drawing tools

From the left tool palette:

  • Trend lines, rays, arrows
  • Horizontal levels and channels
  • Folders and z-order in the Layers tab

Drawings persist per chart layout.

Indicators and strategies

Install from Marketplace or author your own Python artifacts. The Indicators and Strategies tabs manage active instances; Edit opens an inline code editor with live preview on the current chart.

Roadmap / partial: standalone line-only chart mode and depth/order-book chart pane are not shipped yet. The Balance sidebar tab is API-backed (virtual/connected balances); Market simulator is a client-side demo only.

TabPurpose
Asset informationStats and exchange metadata
LayersDrawing and overlay layer order
IndicatorsInstalled indicator overlays
StrategiesBacktest and paper trading panels
AdjustmentsCustom adjustment lists (manage via list workspace)
BalancePortfolio balances linked to the chart layout
Market simulatorLocal demo trading UI (not connected to backend)
AlertsPrice alerts (API-backed)
InspectorSelection details for drawings

Keyboard shortcuts

See in-app shortcut help and docs/services/web/rules/keyboard-shortcuts.md in the repository for the full list. Common actions: zoom, pan, crosshair, undo/redo for drawings.

Best practices

  1. Start with one or two indicators — overcrowding adds noise
  2. Match timeframe to your strategy’s design
  3. Backtest strategies before trusting signals (Backtesting)
  4. Use read-only shared links (/chart/view/{layoutId}) when sharing layouts