Trading overlay

Render positions, orders, signal markers, and trade zones directly on the chart. Designed to integrate with both manual and algorithmic trading flows.

Disabling trading

Trading is opt-out, not opt-in. Projects that don't need trading affordances have two off-switches:

// Drop the entire trading subsystem (no orders, no positions, no overlay, no menu)
new Chart(host, { features: { trading: false } })

// Keep positions and orders visible, but remove the right-click order menu
new Chart(host, { features: { tradingContextMenu: false } })

With either flag set, native browser right-click works on the chart as expected (previously the custom menu suppressed it unconditionally — fixed in 0.8.1).

Positions

chart.addPosition({
  id: 'pos-1',
  side: 'long',
  entry: 65_200,
  quantity: 0.5,
  closedQuantity: 0.1,   // partial-close band on the left edge
  stopLoss: 64_800,
  takeProfit: 66_000,
})

Orders

chart.addOrder({
  id: 'ord-1',
  side: 'sell',
  type: 'limit',
  price: 65_500,
  quantity: 0.25,
})

Drag the price line to modify; subscribe via chart.on('orderModify', ...).

Signal markers

Bot or signal-trading integrations can place directional arrows on the overlay.

chart.addSignalMarker({
  id: 'sig-12',
  time: bar.time,
  price: bar.close,
  direction: 'long',
  confidence: 0.86,
  source: 'momentum-bot',
  label: 'EMA cross',
})

Trade zones

Visualize entry → exit rectangles with P&L coloring and direction badges.

chart.addTradeZone({
  id: 'tz-1',
  side: 'long',
  entryTime: openedAt,
  exitTime: closedAt,
  entryPrice: 65_100,
  exitPrice: 65_800,
  status: 'closed',
})

Position label tokens

Customize the on-chart label per position. positionLabel accepts a template string or a function returning a string.

new ChartWidget(host, {
  trading: true,
  positionLabel: '{side} {qty} @ {entry} · {pnlSign}{pnlPct}%',
})

Available tokens: {side}, {qty}, {openQty}, {closedQty}, {entry}, {price}, {pnl}, {pnlPct}, {pnlSign}.

P&L gradient stops

new ChartWidget(host, {
  trading: true,
  pnlThresholds: [
    { pnlPct: -0.02, color: '#ef4444' },
    { pnlPct: 0,     color: '#94a3b8' },
    { pnlPct: 0.02,  color: '#10b981' },
  ],
})