How to shift a coloured TradingView background to the past or future?

TL;DR
Pass an offset to bgcolor(color, title, offset)—negative values move the colour into the past, positive values project it into the future.

At a Glance


Difficulty	Beginner
Time to implement	5-10 min
Category	Visual Effects

Quick Actions

Quick Start

//@version=5
indicator("Shifted background", overlay=true)

isRange = high - low < ta.sma(high - low, 20)
rangeColor = color.new(color.blue, 85)

bgcolor(isRange ? rangeColor : na, title="Range zone", offset=-3)

Tip. Negative offsets move the colour to earlier bars (left). Positive offsets push the colour into future bars (right). Keep offsets reasonable to avoid painting outside visible history.

Why It Matters

Sometimes you want to highlight the lead-up to an event (paint the bars that caused the signal) or warn a few bars ahead (project an expected zone). Offsetting bgcolor, plot, or fill keeps visuals aligned with the context you care about without manual labels or boxes.

What You’ll Learn

Apply offsets to bgcolor to paint past or future bars.
Combine offsets with buffers to show anticipation windows.
Align offsets with plots or labels for cohesive storytelling.
Manage edge cases when offsets push colours off the chart.

Quick Reference

Call	Purpose
`bgcolor(color, title=?, offset=0)`	Colours the chart background with optional shift.
`plot(series, title, offset)`	Use the same offset to align plotted guides with the background.
`fill(plot1, plot2, color, title, offset)`	Fills between plots, also accepting an offset.
`math.max` / `math.min`	Clamp offsets if user inputs might exceed safe ranges.
`input.int`	Let users configure how many bars to shift.

Implementation Blueprint

Define the trigger condition
Decide which bars you want to highlight (e.g., consolidation, high volume, trend change).
```
consolidation = ta.tr(true) < ta.lowest(ta.tr(true), 14)
```

Select the colour and offset
Choose a semi-transparent tone and the number of bars to shift left/right.

shiftBars = input.int(2, "Shift background (bars)", minval=-10, maxval=10)
highlight  = color.new(color.orange, 80)

Apply bgcolor with offset
Send na when the condition is false so the background resets.
```
bgcolor(consolidation ? highlight : na, offset=shiftBars)
```

Example Playbook

//@version=5
indicator("Breakout prep zones", overlay=true)

length      = input.int(30, "Range lookback", minval=5)
shiftPast   = input.int(3, "Highlight past bars", minval=0, maxval=20)
shiftFuture = input.int(2, "Project future bars", minval=0, maxval=20)

rangeHigh = ta.highest(high, length)
rangeLow  = ta.lowest(low, length)

insideRange = close > rangeLow and close < rangeHigh

rangeColorPast   = color.new(color.blue, 88)
rangeColorFuture = color.new(color.teal, 88)

// Highlight the bars leading up to the breakout
bgcolor(insideRange ? rangeColorPast : na, title="Range history", offset=-shiftPast)

// Project expected breakout zone a few bars ahead
bgcolor(insideRange ? rangeColorFuture : na, title="Range projection", offset=shiftFuture)

plot(rangeHigh, "Range high", color=color.new(color.green, 40))
plot(rangeLow,  "Range low",  color=color.new(color.red, 40))

Why this works.

Two offsets let you colour both the build-up bars and a forward-looking anticipation zone.
Plots provide structure so readers see what the highlight references.
User inputs keep the shift configurable without editing code.

Pro Tips & Pitfalls

Offsets paint relative to the current bar index. Large positive offsets may extend beyond visible data; the colour still draws, but you might not see it until price extends.
Combine offsets with barstate.islast labels to explain what the shifted region represents.
Remember that offset backgrounds remain even if the condition becomes false later—send na for bars where you don’t want colour.
Keep transparency high (color.new(..., 70+)) so price remains readable despite overlap.

Troubleshooting & FAQ

Background disappears near the left edge

Negative offsets reference bars before history starts, so Pine discards them. Reduce the offset or start highlighting after enough bars have elapsed.

Future highlight looks delayed in real time

Because future offsets paint to the right, they may extend off-screen until more bars print. Consider combining with projected boxes if you need a visible anchor immediately.

Can I offset other drawing calls?

Yes—plot, plotshape, and fill all support offset. Keep offsets consistent so visuals remain aligned.

Key Takeaways

bgcolor accepts an offset to move highlights into past (negative) or future (positive) bars.
Use semi-transparent colours and sensible offsets to avoid obscuring price.
Pair offsets with plots or labels so users understand what the shifted region represents.
Configurable offsets make it easy to experiment with different lookback or projection windows.

Keep Going

Open AI Editor to apply the pattern with guided assistance
Browse Strategy Examples for ready-to-run templates
Connect to Live Trading when you are ready to automate

Adapted from tradingcode.net, optimised for Algo Trade Analytics users.