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/chartspire'

const chart = new ChartSpire({
  container: 'chart-container',
  // Enable trades component
  tradesEnabled: true,
  tradesMaxRows: 50,
  tradesTimeFormat: '24h' // or '12h'
})