This article provides a summary of the chapter on background colouring in TradingView. Follow the links to the different articles for more information and examples.

In this article:

Colouring the full background of TradingView charts

There are two ways in which we can colour a chart’s background. The first shades the full background from top to bottom while the second colours an area that’s between two plots or horizontal lines.

The first approach, colouring the chart’s full background, is done with the bgcolor() function (Pine Script Language Tutorial, n.d.). This function either colours the background of the instrument’s price bars or the subchart background, depending on where the script displays.

The bgcolor() function has the following syntax (TradingView, n.d.):

bgcolor(color, transp, offset, editable, title)

These arguments work as follows (Pine Script Language Tutorial, n.d.; TradingView, n.d.):

Argument Description
color Required argument that sets the colour of the filled background to a basic TradingView colour or a hexadecimal colour value. An expression (like close > open ? green : red) can also be used here to colour the chart’s background conditionally.
transp Optional argument that sets the background’s transparency. Its defaults to 90 (highly transparent) and its values range from 0 (not transparent) to 100 (fully invisible).
offset Optional argument that shifts the coloured background with a certain number of bars. When omitted, offset defaults to 0 (meaning no offset). Setting this argument to negative values shifts the background to the left (that is, to the past) while positive values relocate it to the future bars on the chart’s right. Also see offsetting a coloured background.
editable Optional argument that, with its default value of true, allows us to manually change the filled background’s settings in the script’s ‘Style’ window. The background settings cannot be manually changed when editable is set to false.
title Optional argument that specifies the title of the filled background, and this name shows up in the ‘Style’ window when manually changing a script’s colours. With a descriptive name it’s easier to distinguish between different coloured backgrounds.

Colouring the TradingView background conditionally

One application of bgcolor() is colouring the chart background conditionally. We do that by using a condition (like whether the volume is above its EMA) and an if/else statement, conditional (ternary) operator, or iff() function. An example that uses the conditional operator is:

bgcolor(color=volume > ema(volume, 10) ? red : green)

The coloured background made by bgcolor() can also be ‘turned off’. We do that by setting its color argument to na. That built-in variable represents a “not a number” value (TradingView, n.d.) which, when used with bgcolor(), sets the background to the same colour as the chart’s background (see Pine Script Language Tutorial, n.d.). That creates an invisible background. An example of that is:

background = (close > open) ? green :
     (close < open) ? red :
     na

bgcolor(color=background)
Note: The fill() function, which colours a background section, cannot work with conditional colour values or na. And so only bgcolor() can be used to colour the background conditionally.

Overlaying coloured backgrounds in TradingView Pine

Another bgcolor() feature is that it can colour the background repeatedly when used more than once in the same script. Since those coloured backgrounds are placed on top of each other, the order in which bgcolor() executes matters: the first bgcolor() function call creates the undermost background while any subsequent bgcolor() function call create a background that’s placed on top of the previous.

We can see that effect with the following code example:

study(title="Overlaying coloured backgrounds", overlay=false)

bgcolor(color=blue, transp=25)
bgcolor(color=close > open ? lime : na, transp=25)

Here we first create a blue background and then use bgcolor() again to give all bars that closed higher a lime background. This example looks like:

Example of overlaid backgrounds in TradingView

Now, when we switch the places of the bgcolor() statements like this:

study(title="Overlaying coloured backgrounds", overlay=false)

bgcolor(color=close > open ? lime : na, transp=25)
bgcolor(color=blue, transp=25)

Then all price bars get a blue background, with some having a light green tint due to the underlying green background that ‘shines through’:

'Shining through' backgrounds in TradingView

Articles that discuss overlaid coloured backgrounds more in depth are:

Colouring part of the chart’s background in TradingView

The other way to colour the chart’s background in TradingView is with fill(). That function fills the chart area that’s between two plots or horizontal lines (Pine Script Language Tutorial, n.d.). In order to know which area to fill, this function either needs two plot objects or two horizontal line objects.

Those objects represent an instance of a plot or horizontal line, just like a numerical variable represents a certain number. The hline() function, which plots a horizontal line at a fixed price level, returns horizontal line objects. And plot objects are returned by plot() after plotting a series of data on the chart (TradingView, n.d.). While we can create different plot types with plot() (like a histogram, line, crosses, or circles plot), the kind of plot doesn’t matter for fill() – the background area between any plots can be filled, whether the two plots are of the same kind or not.

If we create horizontal lines or plots and want to fill the background between them with fill() at a later point, then we need to store their objects in variables with the assignment operator (=) like so:

emaPlot = plot(ema(close, 20), color=red)
obLine  = hline(price=90, color=fuchsia)

We then use those variables with the fill() function to specify between which plots or horizontal lines we want to fill the background.

The two versions of the fill() function – for plots or horizontal lines – have the following default syntax (TradingView, n.d.):

fill(hline1, hline2, color, title, transp, editable)
fill(plot1, plot2, color, title, transp, editable)

The fill() function arguments stand for the following (TradingView, n.d.):

Argument(s) Description
hline1, hline2 Required arguments that specify the first and second horizontal line that we want to colour the background between.
plot1, plot2 Required arguments that define the first and second plot that we want to fill the background between.
color Optional argument that sets the filled background to a basic TradingView colour or a hexadecimal colour value. When this argument isn’t set, fill() uses a colour from the plot or horizontal objects.
title Optional argument that gives the shaded background a name. By using an unique name here it’s easier to identify the filled background in the script’s ‘Style’ tab when setting a script’s colours manually.
transp Optional argument that sets the transparency of the filled background. Its values range from 0 (not transparent) to 100 (a fully transparent, invisible background).
editable Optional argument that defaults to true, in which case the background’s settings can be edited in the ‘Style’ tab when setting the script’s colours manually. When editable is set to false the filled background settings can not be changed by hand.

The fill() function can, for example, colour the background between two moving averages which look like:

Filling the background between two moving averages in TradingView
Note: While both the bgcolor() and fill() functions colour the chart’s background, fill() only colours the background section that’s between two plots or two horizontal lines whereas bgcolor() colours the chart’s background from top to bottom.

Because the fill() function either needs two horizontal lines or two plots, it cannot filled the area between a horizontal line and plot (Pine Script Language Tutorial, n.d.). A work around for that is filling the background between a plot and horizontal plot. For example:

study(title="Fill between plot and line", overlay=false)

plotObj  = plot(series=close - close[10])
plot2Obj = plot(series=0)

fill(plotObj, plot2Obj)

The first plot in this example is a line that plots the difference between the current close and the close of 10 bars ago. The other plot has its series argument set to a fixed value (0) which in effect makes a horizontal line. Since this script’s lines are both made with plot(), we can call the fill() function to colour the background between them.

Note: The fill() function cannot use colours conditionally nor can we ‘turn off’ the filled background area by using the na value. This means that only the bgcolor() function can be used to colour the chart’s background conditionally.

Besides using variables that hold plot or horizontal line objects, the plot() and hline() function can also be executed from inside the fill() function. That way we can skip the intermediate step of using variables. For example:

study(title="Colouring background between hlines", overlay=false)

fill(hline1=hline(price=20, color=green),
     hline2=hline(price=80, color=red),
     color=navy, transp=90)

plot(series=rsi(close, 10), color=blue)

Another feature of fill() is combining coloured background sections. We do that by repeatedly executing this function. In that case, the first fill() function call creates the undermost coloured background while any fill() function call after that creates a coloured background section placed on top of the previous.

Of course, the fill() and bgcolor() functions can also be combined to, for instance, colour the background of price bands and price bars in TradingView. Other articles with examples of fill() are:

This concludes the chapter on background colouring in TradingView Pine. See all TradingView programming tutorials to learn more about other topics.


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 January 14, 2016, from https://www.tradingview.com/study-script-reference/