TradeVisualization Generator

The TradeVisualization generator displays trade transactions (buys and sells) directly on the chart. Each transaction is rendered as an info box above the corresponding candle.

Add to Chart:

Use a Controller object to add the generator to a chart:

const tradeVisualizationGenerator = controller.addGenerator('TradeVisualization');
Copy

Types

type BaseTransaction = {
    ts: number;
    units: number;
    quote: number;
    currency: string;
};

type BuyTransaction = BaseTransaction & {
    direction: 'buy';
};

type SellTransaction = BaseTransaction & {
    direction: 'sell';
    profitLoss: number;
};

type Transaction = BuyTransaction | SellTransaction;

type Trade = {
    id: number;
    visualizeQuotes: boolean;
    transactions: Transaction[];
};
Copy

• ts: timestamp of the transaction
• units: number of units traded
• quote: execution price
• currency: currency symbol for display
• direction: 'buy' or 'sell'
• profitLoss: profit or loss amount (sell transactions only)
• id: unique identifier for the trade
• visualizeQuotes: when true, vertical markers are drawn at the quote price for each transaction
• transactions: array of individual transactions belonging to the trade

Public methods:

The generator exposes the following public method.

#addTrade

• Type

  interface TradeVisualizationGenerator {
      addTrade(trade: Trade): boolean;
  }
  Copy

• Details

  addTrade takes a Trade object and adds it to the chart. Each transaction in the trade will be rendered at its corresponding timestamp position on the chart. The method returns true if the trade was successfully added, or false if chart data is not available.

  After adding a trade, the chart will automatically zoom to show all transactions with some padding.

• Example

  // example usage:
  const success = tradeVisualizationGenerator.addTrade({
      id: 1,
      visualizeQuotes: true,
      transactions: [
          {
              ts: 1700000000000,
              units: 100,
              quote: 150.25,
              currency: '€',
              direction: 'buy',
          },
          {
              ts: 1700500000000,
              units: 100,
              quote: 155.50,
              currency: '€',
              direction: 'sell',
              profitLoss: 525.00,
          },
      ],
  });
  Copy

Styling

Transaction info boxes are color-coded based on their type:

Each info box displays:

• A title bar showing BUY or SELL
• The number of units traded
• The quote price with currency
• Profit/loss amount with currency (sell transactions only)
• A triangle pointing down toward the candle

When visualizeQuotes is set to true, vertical markers are additionally drawn on the price scale at each transaction's quote price.

Notes

• The generator is ephemeral - it does not persist across instrument changes. When the chart instrument changes, all trades are cleared.
• The generator does not have a legend entry.
• Info boxes are non-interactive (they cannot be selected or clicked).
• The generator's NONE descriptor flag means it is not listed in the UI generator menu - it is intended to be added programmatically.