Trades

Live time-and-sales for the active chart symbol in the right sidebar. Each row shows time, price, quantity, and buy/sell side (color-coded). Background bar width scales with quantity relative to the largest visible trade.

Configuration

new ChartSpire({
  tradesEnabled: true,
  tradesMaxRows: 50,
  tradesTimeFormat: '24h', // or '12h'
  defaultOpenComponents: ['trades'], // optional
  dataFeed: dataFeed,
  // ...
})

Option	Type	Default	Description
tradesEnabled	boolean	false	Enable trades panel in right sidebar
tradesMaxRows	number	50	Max trade rows displayed
tradesTimeFormat	'12h' | '24h'	'24h'	Initial timestamp format (also changeable in the panel UI)

Open on load with defaultOpenComponents: ['trades'] (max 3 panels; panel must be enabled). See Widget API.

Data Feed Requirements

For custom data feeds, implement the optional methods:

subscribeTradeData(symbol: Symbol, callback: TradeDataCallback, uuid?: string): void
unsubscribeTradeData(symbol: Symbol, uuid?: string): void

Leave tradesEnabled off if these are unimplemented. Transport is up to your feed (WebSocket, SSE, polling). Shared-subscription rules: Data Access.

TradeDataCollection format:

interface TradeDataCollection {
  trades: TradeData[]
  symbol: string
  exchange?: string
  lastUpdated: number
}

interface TradeData {
  id: string
  price: string
  quantity: string
  timestamp: number // ms
  side: 'buy' | 'sell'
  tradeType?: string
}

Example callback payload:

{
  trades: [
    {
      id: "123456",
      price: "119362.10",
      quantity: "0.05",
      timestamp: 1640995200123,
      side: "buy"
    }
  ],
  symbol: "BTCUSDT",
  exchange: "binance",
  lastUpdated: 1640995200123
}

Push incremental batches; the panel merges by symbol, keeps newest first, and trims to tradesMaxRows for display.

See Type Reference and Data Access.