Events

onOrderAction#

Register:

chart.onOrderAction((event) => {
  // handle
});

Payload type:

type OrderActionEvent = {
  orderId?: string;
  action: "close" | "cancel" | "move" | "createLimit" | "execute" | string;
  price?: number;
  dragging?: boolean;
  line?: OrderLineOptions;
};

Common actions#

• execute: action button pressed (for example Buy/Sell)
• close: close button pressed (usually market-type line)
• cancel: cancel button pressed (usually pending line)
• move: draggable line moved
• createLimit: double-click action in placeLimitOrder mode

Drag semantics#

For draggable actions and lines:

• during drag updates: dragging: true
• on drag end: dragging: false (final value)

For move:

• price contains the new line price.

Notes#

• action is intentionally open (string) so app code can define custom actions.
• line is the line snapshot associated with the hit region when available.

onChartClick#

Register:

chart.onChartClick((event) => {
  // handle
});

Payload type:

type ChartClickEvent = {
  x: number;
  y: number;
  price?: number;
  region: "plot" | "x-axis" | "y-axis";
};

Behavior#

• region tells where the click happened.
• price is provided for plot region clicks.

onCrosshairMove#

Register:

chart.onCrosshairMove((event) => {
  // update OHLC header, hover widgets, etc
});

Payload type:

type CrosshairMoveEvent = {
  x: number;
  y: number;
  region: "plot" | "x-axis" | "y-axis";
  price?: number;
  index?: number;
  time?: string;
  point?: OhlcDataPoint;
};

Notes#

• Fires while hovering in chart regions.
• For plot hover, price is included.
• point is included when hover maps to an existing candle index.
• Use this to implement TradingView-style dynamic OHLC readout in your app header.

onCrosshairPriceAction#

Register:

chart.onCrosshairPriceAction((event) => {
  // frontend action (open order ticket, quick action, etc)
});

Payload type:

type CrosshairPriceActionEvent = {
  x: number;
  y: number;
  price: number;
};

Notes#

• Fires when the optional crosshair price action button (default text "+") is clicked.
• Enable button rendering via crosshair.showPriceActionButton: true.

Double-click integration#

Set behavior:

chart.setDoubleClickEnabled(true);
chart.setDoubleClickAction("placeLimitOrder"); // or "reset"

• "placeLimitOrder" emits onOrderAction({ action: "createLimit", price }) when double-clicking plot.
• "reset" resets viewport/scale behavior.