Plotting & Rendering

ctx.plot(dataArray, options)

Renders a continuous line series of values dynamically. Options: { color = '#2196F3', width = 1, style = 'solid' | 'dashed' | 'dotted' }.

ctx.plot(sma9, { color: '#ff9800', width: 2, style: 'solid' });

ctx.plotchar(dataArray, options)

Plots indicator glyphs or character signals above or below bars. Options: { char = '*', location = 'belowbar' | 'abovebar' | 'top' | 'bottom' | 'absolute', color = '#FF9800', size = 12, offset = 0 }.

ctx.plotchar(buySignalArray, { char: '▲', location: 'belowbar', color: '#4caf50', size: 14 });

ctx.plotcandle(open, high, low, close, options)

Renders custom candles overlaid directly on price columns. Options: { color = '#089981', wickcolor = '#787b86' }.

ctx.plotcandle(openArr, highArr, lowArr, closeArr, { color: '#ffd54f' });

ctx.hline(price, options)

Plots a fixed horizontal line across the screen viewport. Options: { color = '#787b86', width = 1, style = 'solid' | 'dashed' | 'dotted' }.

ctx.hline(150.00, { color: '#e91e63', style: 'dashed' });

plotshape(series, title, style, location, color, size)

Plots standard geometric markers (e.g. arrows, circles) matching Pine Script properties. Mapped internally to plotchar unicode glyphs.

plotshape(buyArray, "Buy", shape.triangleup, location.belowbar, color.green);

barcolor(color) / bgcolor(color)

barcolor overrides the candle wicks and bodies dynamically. bgcolor draws full-height horizontal highlight ribbons behind the grid.

barcolor(close > open ? color.green : color.red);
bgcolor(rsi > 70 ? color.new(color.red, 90) : na);

Filling Space Between Plots (fill)

The fill() function allows you to color the background space between two plotted lines, commonly used for indicators like the Ichimoku Cloud or Bollinger Bands.

const p1 = plot(fastSMA, { color: 'green' });
const p2 = plot(slowSMA, { color: 'red' });
fill(p1, p2, 'rgba(33, 150, 243, 0.2)');