Skip to content

Order Book

Displays real-time bid and ask orders for the current symbol in the right sidebar.

Configuration

typescript
new ChartSpire({
  orderBookEnabled: true,
  orderBookMaxRows: 10,
  orderBookDepthVisualization: 'cumulative',
  dataFeed: dataFeed,
  // ...
})
OptionTypeDefaultDescription
orderBookEnabledbooleanfalseEnable order book in right sidebar
orderBookMaxRowsnumber10Max rows per side (bids/asks)
orderBookDepthVisualization'amount' | 'cumulative''cumulative'Bar width: per-level quantity (amount) or running total (cumulative)

View Modes

  • Combined (default): Asks above, spread, bids below
  • Bids Only / Asks Only: Single side
  • Split: Side-by-side with bids and asks mirrored toward center

Tick Size Aggregation

Orders can be grouped by price level. Available tick sizes: 0.01, 0.1, 1, 10, 100. Selected via the order book UI.

Data Feed Requirements

For custom data feeds, implement optional methods:

typescript
subscribeOrderBookData(symbol: Symbol, callback: OrderDataCallback, uuid?: string): void
unsubscribeOrderBookData(symbol: Symbol, uuid?: string): void

OrderBookData format:

typescript
interface OrderBookData {
  bids: Array<[string, string]>  // [price, quantity]
  asks: Array<[string, string]>  // [price, quantity]
  timestamp: number
}

Example:

typescript
{
  bids: [["119361.91", "0.15"], ["119361.90", "0.08"]],
  asks: [["119362.46", "0.12"], ["119362.47", "0.18"]],
  timestamp: 1640995200000
}