Exciting Update: Version 1.0.1 is now available, introducing the high-performance BacktestX Custom Script Editor. Read more

Drawings & Colors

Pine Script compatible drawing primitives and transparent color helpers exposed by the scripting engine.

color.new(colorStr, transparency)

Creates a transparent or semi-transparent color string. The transparency parameter scales from 0 (completely opaque) to 100 (completely transparent). Mapped to browser-native rgba() under the hood. 

const fillCol = color.new(color.green, 85); // 85% transparent green

box.new(left, top, right, bottom, bgcolor, border_c, border_w)

Creates a viewport rectangle spanning from bar index left to right, and price levels top to bottom. Supports dynamic solid/alpha backgrounds and colored borders. 

const zone = box.new(
  50, 1.2500, 
  100, 1.2450, 
  color.new(color.red, 90), 
  color.red, 
  1
);

Related helpers:

  • box.delete(boxObj): Removes the specified box object from the canvas.
  • box.set_bgcolor(boxObj, color): Modifies the background fill color of an active box.
  • box.set_border_color(boxObj, color): Modifies the boundary line color of an active box.
  • box.set_left(boxObj, left) / box.set_right(boxObj, right): Updates the horizontal bar index boundaries of the box.

line.new(x1, y1, x2, y2, color, style, width)

Draws a straight segment between two coordinate pairs (x1, y1) and (x2, y2) using bar index and price levels. Styles include 'solid' | 'dashed' | 'dotted'. 

const trendLine = line.new(startIndex, lowVal, endIndex, highVal, color.blue, 'dashed', 2);

Related helpers:

  • line.delete(lineObj): Removes the specified line object from the active list.

label.new(x, y, text, color, style, textcolor, size)

Creates a styled text label bubble anchored at bar index x and price level y. Style options include: 'up' | 'down' | 'left' | 'triangleup' | 'triangledown' | 'arrowup' | 'arrowdown'. 

label.new(i, low, "BUY", color.green, 'up', color.white, 'normal');

Related helpers:

  • label.delete(labelObj): Deletes the specified label object from the active list.

linefill.new(line1, line2, color)

Fills the area between two active line objects with a colored, semi-transparent background fill. Extremely useful for drawing custom channels, Keltner Bands, or moving average ribbons. 

const l1 = line.new(start, high1, end, high2, color.blue);
const l2 = line.new(start, low1, end, low2, color.blue);
linefill.new(l1, l2, color.new(color.blue, 90));

fib.new(startBar, startPrice, endBar, endPrice, color)

Draws dynamic Fibonacci retracement levels (0%, 23.6%, 38.2%, 50.0%, 61.8%, 78.6%, 100%) between two anchor points (startBar, startPrice) and (endBar, endPrice). 

fib.new(startIdx, lowPrice, endIdx, highPrice, color.purple);

Interactive Tooltips

You can attach interactive hover tooltips to drawing objects like boxes and labels by passing the tooltip property in the options object. The engine automatically handles hit-detection. 

box.new(bar1, price1, bar2, price2, {
  bgcolor: 'rgba(255,0,0,0.2)',
  tooltip: 'Bullish Engulfing Pattern Detected!\nVolume: High'
});