Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.darvas.app/llms.txt

Use this file to discover all available pages before exploring further.

Signature

Box(key, opts) -> handle
A Box occupies a rectangular region defined by two bar/price corners. Common uses: order blocks, fair value gaps, supply/demand zones, consolidation ranges.

Quick example

const ob = Box("order-block", {
  x1: 5,   y1: 100,
  x2: 15,  y2: 110,
  color: "#a78bfa20",
  borderColor: "#a78bfaFF",
  borderWidth: 1,
  extend: "right",
  text: "Order Block",
  textColor: "#FFFFFFFF",
});

Options

x1
number
required
Left x coordinate (bar index).
y1
number
required
Bottom y coordinate (price).
x2
number
required
Right x coordinate (bar index).
y2
number
required
Top y coordinate (price).
color
string
Fill color as #RRGGBBAA. Use low alpha for zone overlays (e.g. #a78bfa20). Default: transparent.
rounding
number
Corner radius in pixels. Default: 0.
borderColor
string
Border color as #RRGGBBAA.
borderWidth
number
Border width in pixels. Default: 1.
borderStyle
string
"solid", "dotted", or "dashed". Default: "solid".
extend
string
Extend the box in a direction. One of: "none", "left", "right", "up", "down", "both_x", "both_y". Default: "none".
text
string
Label text rendered inside the box.
textSize
string
Font size preset: "xs", "sm", "md", "lg", "xl", "auto". Default: "md".
textColor
string
Text color as #RRGGBBAA.
textHAlign
string
Horizontal text alignment: "left", "center", "right". Default: "center".
textVAlign
string
Vertical text alignment: "top", "center", "bottom". Default: "center".
textWrap
string
"none" or "auto". Default: "auto".
zIndex
number
Stacking order. Default: 0.
forceOverlay
boolean
Render in main price pane even from a sub-pane indicator. Default: false.

Handle methods

box.set({ color: "#22c55e30" }); // change fill color in place
box.clone("order-block-2");      // copy to new key
box.delete();                    // remove from chart

Order block detection example

// Detect bullish order blocks (bearish bar followed by strong bull move)
onBar(() => {
  const prevBear = ctx.open(1) > ctx.close(1);
  const curBull  = ctx.close() > ctx.open(1); // engulf previous bar

  if (prevBear && curBull) {
    const barIdx = ctx.i() - 1;
    Box(`ob_${barIdx}`, {
      x1: barIdx, y1: ctx.low(1),
      x2: ctx.i(), y2: ctx.open(1),
      color: "#22c55e20",
      borderColor: "#22c55eFF",
      borderWidth: 1,
      extend: "right",
      text: "OB",
      textColor: "#22c55eFF",
      textSize: "sm",
    });
  }
});

Line

For lines rather than rectangular zones.

Constants

extend.* and size.* enum values.

Order blocks example

Full working order block indicator.