Plot Types Reference

Complete reference for all plot functions available in CodeLab scripts.

plot() — Line Plot

Draw a continuous line on the chart.

plot(name: string, value: number, options?: {
  color?: string,      // color.blue or '#hex'
  width?: number,      // Line width (default: 1)
  style?: 'solid' | 'dashed' | 'dotted',
  overlay?: boolean    // true = draw on price chart
})

Example:

plot('SMA', this.sma('close', 20), { color: color.blue, width: 2, overlay: true });

plotHistogram() — Histogram Bars

Draw vertical bars from a base value.

plotHistogram(name: string, value: number, options?: {
  color?: string,      // Can change per bar for dynamic coloring
  baseValue?: number   // Y-axis origin (default: 0)
})

Dynamic coloring per bar:

const hist = m.histogram;
plotHistogram('Hist', hist, {
  color: hist >= 0 ? color.green : color.red
});

4-color MACD histogram pattern:

const hist = m.histogram;
const prevHist = this.bar > 0 ? this.getPlot('MACD', 1) - this.getPlot('Signal', 1) : 0;
let c;
if (hist >= 0) {
  c = hist > prevHist ? '#16a34a' : '#86efac';  // dark green / light green
} else {
  c = hist < prevHist ? '#dc2626' : '#fca5a5';  // dark red / light red
}
plotHistogram('Histogram', hist, { color: c });

plotColor() — Dynamic Color Line

Plot a line that changes color on every bar.

plotColor(name: string, value: number, colors: string[], colorIndex: number, options?: {
  width?: number,
  style?: 'solid' | 'dashed' | 'dotted'
})

2-color pattern (bullish/bearish):

plotColor('RSI', rsiVal,
  [color.green, color.red],
  rsiVal > 50 ? 0 : 1,
  { width: 2 }
);

3-color pattern (overbought/oversold/neutral):

plotColor('RSI', rsiVal,
  [color.green, color.red, color.gray],
  rsiVal > 70 ? 1 : rsiVal < 30 ? 0 : 2,
  { width: 2 }
);

SuperTrend coloring:

const st = this.supertrend(10, 3);
plotColor('SuperTrend', st.value,
  [color.green, color.red],
  st.direction === 1 ? 0 : 1,
  { width: 2 }
);

hline() — Horizontal Reference Line

Draw a static horizontal line at a fixed level.

hline(name: string, level: number, options?: {
  color?: string,
  width?: number,
  style?: 'solid' | 'dashed' | 'dotted'
})

Overbought/Oversold zones:

hline('Overbought', 70, { color: color.red, style: 'dashed' });
hline('Oversold', 30, { color: color.green, style: 'dashed' });
hline('Middle', 50, { color: color.gray, style: 'dotted' });

plotShape() — Shape Markers

Draw shape markers on specific bars when a condition is true.

plotShape(name: string, condition: boolean, options?: {
  shape?: 'triangleup' | 'triangledown' | 'circle' | 'cross' | 'diamond',
  location?: 'abovebar' | 'belowbar' | 'top' | 'bottom',
  color?: string,
  size?: 'tiny' | 'small' | 'normal' | 'large',
  text?: string
})

Buy/Sell signals:

if (this.crossOver(fast, slow, prevFast, prevSlow)) {
  plotShape('Buy', true, {
    shape: 'triangleup',
    location: 'belowbar',
    color: color.green,
    size: 'small',
    text: 'BUY'
  });
}

plotArrow() — Arrow Markers

Simplified arrow markers (shorthand for plotShape with triangles).

plotArrow(name: string, condition: boolean, options?: {
  direction?: 'up' | 'down',  // default: 'up'
  color?: string,
  size?: 'tiny' | 'small' | 'normal' | 'large'
})

plotArea() — Fill Between Plots

Fill the area between two previously plotted lines.

plotArea(plot1Name: string, plot2Name: string, options?: {
  colorAbove?: string,  // Fill color when plot1 > plot2
  colorBelow?: string   // Fill color when plot1 < plot2
})

Bollinger Band fill:

plot('Upper', bb.upper, { color: color.blue, overlay: true });
plot('Lower', bb.lower, { color: color.blue, overlay: true });
plotArea('Upper', 'Lower', {
  colorAbove: 'rgba(59,130,246,0.1)',
  colorBelow: 'rgba(59,130,246,0.1)'
});

bgcolor() — Background Color

Color the background of the current bar.

bgcolor(color: string, options?: { opacity?: number })

// Highlight overbought/oversold zones
if (rsiVal > 70) bgcolor('#ef444420');  // light red background
if (rsiVal < 30) bgcolor('#22c55e20');  // light green background

barcolor() — Bar Color

Change the color of the current price bar.

barcolor(color: string)

// Color bars by trend
barcolor(this.close > this.open ? color.green : color.red);

Overlay vs Sub-pane

Use overlay: true	Use sub-pane (default)
Moving averages	RSI, Stochastic (0-100)
Bollinger / Keltner Bands	MACD (different scale)
SuperTrend	CCI, ADX
Pivot points	Histograms
Channels	Volume indicators

Color Palette Reference

Name	Hex	Use For
color.green	#22c55e	Bullish / buy signals
color.red	#ef4444	Bearish / sell signals
color.blue	#3b82f6	Primary indicator lines
color.orange	#f97316	Signal lines
color.purple	#a855f7	RSI, oscillators
color.cyan	#06b6d4	Fast MAs
color.gray	#6b7280	Reference lines, neutral
color.gold	#d97706	Highlight, premium

Custom hex colors and rgba strings are also supported: '#ff6600', 'rgba(34,197,94,0.15)'