Concepts

Layers

What paints above what within a pane.

Each chart pane paints three layers, bottom to top:

bottom: below the candles, e.g. the liquidity heatmap.
normal: the candles and most indicators.
top: above everything but the crosshair.

A ChartOverlay draws into surface.layer, "normal" when omitted. Parts of a script can go to another layer with g.layer:

draw: (s, frame, g) => {
  g.layer("bottom", () => {
    g.rect(0, top, frame.width, height, "rgba(66,165,245,0.08)"); // under the candles
  });
  g.line(0, y, frame.width, y, { color: "#42a5f5", width: 1 }); // in the surface's layer
},

Order within a layer

Later calls paint above earlier ones.
Text paints above all shapes of its layer, whatever the call order.
Scripts in the same layer paint in the order they were added to the chart.

Clipping

Drawing is clipped to the pane. g.clip(rect, () => { … }) clips further, e.g. to a plot area inside a Canvas.

A Canvas has one layer: g.layer just runs its callback there.

Coordinates

How a script places shapes: pane px, time in epoch ms, raw prices, and converting between them.

Interaction

Make a script react to hover, clicks, drags and right-click menus.

On this page

Order within a layer Clipping