Order Line

The Order Line drawing tool visualizes trading orders on the financial chart with support for take-profit (TP) and stop-loss (SL) levels, quantity display, and various actions (modify, cancel, reverse, close).

Key Features

• Visual representation of trading orders with customizable styling
• Support for TP and SL price levels with independent styling
• Quantity display and text annotations
• Interactive actions: modify, cancel, reverse, and close positions
• Buy/sell side differentiation
• Full integration with chart navigation (zoom/pan)

API Usage

The Order Line is created using the createOrderLine() method available on both the global chart instance and individual chart instances:

// Create an order line on the chart
const orderLine = await chart.createOrderLine();

// Configure order line properties
orderLine.setPrice(150.25);
orderLine.setTpPrice(155.75);
orderLine.setSlPrice(148.50);
orderLine.setText("Buy Order #1");
orderLine.setQuantity("100");
orderLine.setSide("buy");

Configuration Options

Option	Type	Default	Description
price	number	Required	Base price level for the order
tpPrice	number	undefined	Take-profit price level
slPrice	number	undefined	Stop-loss price level
text	string	""	Text annotation for the order
quantity	string	"1"	Order quantity
side	"buy" | "sell"	"buy"	Order side (buy/sell)
orderType	"limit" | "stop" | "market"	"limit"	Order type
status	"open" | "filled" | "cancelled" | "rejected"	"open"	Order status
color	string	"#2b7cff"	Base line color
tpColor	string	undefined	TP line color
slColor	string	undefined	SL line color
lineWidth	number	1	Base line width
tpLineWidth	number	1	TP line width
slLineWidth	number	1	SL line width

Events

The Order Line supports the following events:

// Listen for order line creation
chart.on('order-line-create', (event) => {
  console.log('Order line created:', event.lineId);
});

// Listen for order line modification
chart.on('order-line-change', (event) => {
  console.log('Order line changed:', event.lineId, event.property, event.value);
});

// Listen for order line removal
chart.on('order-line-remove', (event) => {
  console.log('Order line removed:', event.lineId);
});

Practical Example

// Create and configure an order line
const orderLine = await chart.createOrderLine();

// Set base order properties
orderLine.setPrice(142.35);
orderLine.setText("BTC/USD Buy Entry");
orderLine.setQuantity("0.5");
orderLine.setSide("buy");

// Configure TP and SL levels
orderLine.setTpPrice(148.75);
orderLine.setSlPrice(139.20);

// Customize styling
orderLine.setColor("#2b7cff"); // Blue for buy orders
orderLine.setTpColor("#4caf50"); // Green for TP
orderLine.setSlColor("#f44336"); // Red for SL

// Add action tooltips
orderLine.setActionTexts({
  modify: "Modify Order",
  cancel: "Cancel Order",
  reverse: "Reverse Position",
  close: "Close Position"
});

Use Cases

• Entry Points: Mark entry prices for long/short positions
• Risk Management: Visualize stop-loss and take-profit levels
• Order Tracking: Track multiple orders simultaneously on the same chart
• Trade Analysis: Analyze historical order execution and price targets
• Educational Purposes: Demonstrate trading concepts and strategies

Internal Behavior

The Order Line extends TradingLineBase and implements the following key behaviors:

• Uses price-to-pixel conversion for accurate positioning
• Maintains state during zoom/pan operations
• Supports drag interaction for position adjustment
• Integrates with the chart's drawing layer system
• Provides anchor points for interactive manipulation
• Serializes/deserializes for persistence