Trades

ChartSpire includes a trades component that displays real-time trade execution data for the current symbol. The trades component provides transparency into actual market transactions and helps traders understand trading activity, momentum, and price action.

Features

Real-time Trade Data

• Live Data: Real-time trade updates via WebSocket connections
• Trade Execution Details: Shows price, quantity, and exact execution time for each trade
• Buy/Sell Indication: Color-coded trades with green for buys and red for sells
• Visual Trade Bars: Background bars indicate relative trade amounts (price × quantity)
• Chronological Order: Most recent trades displayed first with automatic scrolling

Usage

Enabling Trades

To enable the trades component in your ChartSpire instance:

import { ChartSpire } from 'chartspire'

const chart = new ChartSpire({
  container: 'chart-container',
  tradesEnabled: true,
  tradesMaxRows: 50,
  tradesTimeFormat: '24h', // or '12h'
  // ...other required options
})

Configuration

Option	Type	Default	Description
tradesEnabled	boolean	false	Enable the trades panel in the right sidebar
tradesMaxRows	number	50	Maximum number of trade rows to display
tradesTimeFormat	'12h' | '24h'	'24h'	Time format for trade timestamps

Data Feed Requirements

For custom data feeds, implement the optional subscribeTradeData and unsubscribeTradeData methods:

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

The callback receives a TradeDataCollection object:

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

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

See Data Types for the full type definitions and Data Access for the complete DataFeed interface.