In TradingView we can colour the chart’s background and use that feature to set the chart’s background colour conditionally. But how can we move those coloured backgrounds to the left or right?

In this article:

Shifting a coloured TradingView background to the left or right

Our TradingView scripts can use colours that can be changed manually and set programmatically. For that latter we use basic TradingView colours or a hexadecimal colour value. Any of those colour values are usable by the bgcolor() function to shade the chart’s background from top to bottom (Pine Script Language Tutorial, n.d.). This function either colours the background of the chart’s instrument or the background of a subchart, depending on where the script that calls bgcolor() displays. For more on this function, see colouring the background of a TradingView chart.

By default, bgcolor() colours the current bar’s background. But this function also has an offset argument that shifts the coloured background a certain number of bars to the left or right (TradingView, n.d.). This argument defaults to 0 for no shift, and positive values shift the background to the right while negative values shift the coloured background to the left (see Pine Script Language Tutorial, n.d.).

Note: The offset argument currently only accepts literal values (like offset=10) or the value of an input variable. It doesn’t accept a series of values, and because of that we cannot set the offset of a coloured background conditionally (like offset=close > open ? 10 : 5).

Programmatically shifting a coloured background in TradingView

Let’s discuss an example that plots a volume histogram with its EMA (Exponential Moving Average). We colour the histogram’s background red or green depending on whether the current volume is above or below its EMA. With an input option that coloured background can be shifted to the left or right. We’ll also look at images of the indicator and its input options, but first the indicator’s code:

study(title="Offsetting a coloured background", 
     shorttitle="bgcolor() offset", precision=0)
     
// Inputs
bgOffset = input(title="Background Offset", type=integer, defval=0, 
	 minval=-20, maxval=20)
maLength = input(title="EMA Length", type=integer, defval=20)
showEMA  = input(title="Show EMA?", type=bool, defval=true)

// Compute EMA
emaVol = ema(volume, maLength)

// Plot values
plot(series=volume, color=navy, style=histogram, linewidth=3)
plot(series=showEMA ? emaVol : na, color=orange, style=line, linewidth=2)
hline(price=0, color=black, linestyle=solid, linewidth=1)

// Colour background
bgcolor(color=volume > emaVol ? green : red, offset=bgOffset, transp=85)

We start with study(), a function that’s required for every indicator (TradingView, n.d.). With its title argument we specify how the script is named in TradingView, and with shorttitle we define how the script is named on the chart. We also set precision to 0. That argument affects the number of digits after the floating point of the script’s values, and a precision of 0 formats large numbers with K (thousands) or M (millions) (TradingView, n.d.).

Then we create several input options:

bgOffset = input(title="Background Offset", type=integer, defval=0, 
	 minval=-20, maxval=20)
maLength = input(title="EMA Length", type=integer, defval=20)
showEMA  = input(title="Show EMA?", type=bool, defval=true)

These inputs are made with input(), a function that creates a manual input option in the script’s settings but also returns that input’s current value (TradingView, n.d.). Those values are stored here in variables with the assignment operator (=). That way we can retrieve the input’s value later on in the script with the variable.

The first input has its title argument, which specifies the text that’s placed before the input option in the ‘Inputs’ window, set to “Background Offset”. Its type is set to integer to create a numerical integer input and with the defval argument set to 0 the input starts off with a value of zero. Its allowed range of values is -20 to 20, and we set this with the minval and maxval arguments that specify the input’s minimum and maximum values (TradingView, n.d.). The current value of this “Background Offset” input is stored in the bgOffset variable.

The second input is also an integer input. This one is named “EMA Length” and has a default value (defval) of 20. We assign its current value to the maLength variable, and we’ll use that variable later on when computing the EMA. The third and last input is a Boolean true/false input, which we make by setting the type argument to bool (Pine Script Language Tutorial, n.d.). We name this input “Show EMA?” and give it a default value of false. We use this input, whose value is stored in the showEMA variable, to turn the plotted EMA line on or off.

Next we compute the EMA:

emaVol = ema(volume, maLength)

The moving average is calculated here with ema(), a function that requires two arguments: a series of values and an integer with the EMA length in number of bars (TradingView, n.d.). We set the first argument to the volume built-in variable that returns the current bar’s volume, while the second is set to the emaLength input variable that we gave a default value of 20 just a moment ago. The computed EMA value is assigned to the emaVol variable.

Then we display the script’s values on the chart:

plot(series=volume, color=navy, style=histogram, linewidth=3)
plot(series=showEMA ? emaVol : na, color=orange, style=line, linewidth=2)

We display the volume and its EMA here with plot(). That function plots the data on the chart that’s specified with its series argument (TradingView, n.d.). In the first plot() statement we set that argument to the volume built-in variable and display those values as a navy-blue (color=navy) histogram (style=histogram). The linewidth argument, which ranges from 1 (default) to 4 for the thickest plot (TradingView, n.d.), is set to 3 to create thick histogram bars.

The second plot() statement displays a line (style=line) in the orange basic TradingView colour that’s slightly thicker than normal (linewidth=2). We set its series argument conditionally with the conditional (ternary) operator (?:) to either the emaVol or na value. That operator evaluates a condition and, when the condition is true, returns its second value. Should the condition be false, the conditional operator returns its third and last value (Pine Script Language Tutorial, n.d.).

Our condition is whether the showEMA input variable is true. That variable holds the value of our “Show EMA?” true/false input option, and is therefore true when the checkbox is enabled (checked) and false when it’s disabled (unchecked). And so when that input option is enabled, the conditional operator returns the emaVol variable and that value will subsequently be plotted by plot(). Likewise, when the “Show EMA?” input is disabled, the series argument of the plot() function is set with the conditional operator to na.

That na built-in variable holds a “not a number” value (TradingView, n.d.) which, in the context of plotting, turns off a plot (see TradingView, n.d.). We use that feature of na here to ensure that, when the “Show EMA?” input option is disabled, that the EMA of the volume isn’t shown on the chart.

We also plot a horizontal line before colouring the chart’s background:

hline(price=0, color=black, linestyle=solid, linewidth=1)

The hline() function renders a horizontal line at the price level defined by its price argument (TradingView, n.d.), which we set to 0 here. That value is shown on the chart as a black (color=black) solid line (linestyle=1), and is as thin as possible (linewidth=1). This horizontal line makes it look like the histogram bars are stacked on it.

The last line in the example colours and offsets the background:

bgcolor(color=volume > emaVol ? green : red, offset=bgOffset, transp=85)

We performing the colouring with bgcolor(), a function that fills the background of bars (from top to bottom) with the colour specified by its color argument (TradingView, n.d.). Here we set the background colour conditionally with the conditional (ternary) operator (?:).

The condition that we evaluate is whether the current bar’s volume (volume) is greater than (>) the moving average of the volume (emaVol). When that’s the case, the green colour is returned by the conditional operator and used with the color argument of the bgcolor() function. When the condition evaluates to false, color is set to the red standard TradingView colour.

To offset that red/green background we set the offset argument of the bgcolor() function to the bgOffset input variable, which we gave a default value of 0 with an allowed range of -20 to 20 earlier. When that input is set to a positive value, our coloured background will shift to the right; and with a negative value it will shift to the left. This way can use the “Background Offset” input variable to manually shift the background without having to edit the script’s code.

The transp argument, which sets the background’s transparency from 0 (not transparent) to 100 (invisible) (TradingView, n.d.), cannot be set with an input variable, however. And so we set that argument to 85 here.

Example: relocating a TradingView background to the left or right

When we add the above example to a NASDAQ-100 index tracker chart, it looks like:

Example of colouring the background in TradingView

And on a Dow Jones Industrial Average tracker (DIA) chart, it looks as follows:

Example of the TradingView indicator that colours the background programmatically

The script’s input options look like:

Example of the TradingView script's input options

When we change these settings to a “Background Offset” of 7, the background shifts to the right and the previous DIA chart changes to:

Shifting a coloured background in TradingView

And when we set the “Background Offset” input to -9 (which makes the background shift to the left) and disabled the “Show EMA?” option, then the chart looks like:

Offsetting a coloured background in TradingView

To learn more about the bgcolor() function, see colouring a chart’s background top to bottom and conditionally colouring (or not) a TradingView background. Another TradingView function that colours the chart’s background is fill(), and this function fills the background between two plots or horizontal lines. Both functions can use the same colours though: the basic TradingView colours and hexadecimal colour values.

Summary

Colouring the chart’s background from top to bottom is done with the bgcolor() function. We set the background’s colour with this function’s color argument, while the offset argument shifts the background. This latter argument defaults to 0 (meaning no offset), while positive values shift the background to the right (that is, to future price bars) and negative values offset the background to the left (to past price bars). The offset argument can be set with an input variable or hard-coded, but cannot be given a value conditionally.


References

Pine Script Language Tutorial (n.d.). Retrieved on October 23, 2015, from https://docs.google.com/document/d/1sCfC873xJEMV7MGzt1L70JTStTE9kcG2q-LDuWWkBeY/

TradingView (n.d.). Script Language Reference Manual. Retrieved on December 17, 2015, from https://www.tradingview.com/study-script-reference/