In TradingView we can colour the chart’s background. But how can we only colour a part of the background?

In this article:

Colouring a background section in TradingView

We can set a script’s colours by hand but also in the code, and this latter gives more flexibility by allowing things like conditionally using colours in TradingView. The colours that we can use programmatically include the 17 basic TradingView colours as well as the hexadecimal colour values that allow for numerous colours.

Several functions can work with colours, like bgcolor() that can colour the script’s entire background (TradingView, n.d.). Filling a part of the background is possible too, and we do that with fill(). That function colours the chart’s background between two plot or two horizontal line objects (Pine Script Language Tutorial, n.d.).

These objects are returned by the plot() and hline() functions (Pine Script Language Tutorial, n.d.), and represent an instance of a plot or horizontal line. To use objects later on in the code, they need to be stored in a variable (otherwise we can’t refer to them). We use the assignment operator (=) for that, like so:

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

We can then use such variables in the fill() function to fill the area between them (Pine Script Language Tutorial, n.d.; TradingView, n.d.).

Working with the fill() function in TradingView

The fill() function can work with 2 horizontal lines or with 2 plots, and has the following default syntax (TradingView, n.d.):

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

These fill() arguments have the following meaning (TradingView, n.d.):

Argument(s) Description
hline1, hline2 Required arguments that specify the first and second horizontal line that the background should be coloured between.
plot1, plot2 Required arguments that define the first and second plot that the background should be coloured 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. An unique name helps to identify the 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. With editable set to false we cannot change the shaded background settings by hand.
Note: The fill() function either needs two horizontal lines or two plots, but cannot use one horizontal line and one plot (Pine Script Language Tutorial, n.d.). Using a plot as a horizontal line is a work around for that.
Note: The fill() and bgcolor() functions both colour the chart’s background. But while bgcolor() colours the chart’s full background (from top to bottom), the fill() function only fills the area between two plots or two horizontal lines.

Now let’s look at two programming examples: one that colours the background between two plots and another one that fills the background between two horizontal lines.

Example: shading the area between two moving averages

An indicator that colours the background between two plots is the following:

study(title="Shaded WMAs", overlay=true)

// Inputs
maFastLength = input(title="Fast MA", type=integer, defval=15)
maSlowLength = input(title="Slow MA", type=integer, defval=50)

// Calculate values
maFast = wma(close, maFastLength)
maSlow = wma(close, maSlowLength)

plotColour = (maFast > maSlow) ? lime : #DC143C // Crimson red

// Plot WMAs
fastPlot = plot(series=maFast, color=plotColour, linewidth=2)
slowPlot = plot(series=maSlow, color=plotColour, linewidth=2)

// Fill background between MAs
fill(plot1=fastPlot, plot2=slowPlot, color=blue, transp=90)

We begin the code with defining the indicator’s settings with study(). Then we add two integer inputs with input():

maFastLength = input(title="Fast MA", type=integer, defval=15)
maSlowLength = input(title="Slow MA", type=integer, defval=50)

The first input, named “Fast MA”, has a default value (defval) of 15. Its current value is assigned to the maFastLength variable. “Slow MA” is the second input option, and this one has a default value of 50 and its value stored in maSlowLength.

Then we compute two WMAs (Weighted Moving Averages) and figure out the plot colour:

maFast = wma(close, maFastLength)
maSlow = wma(close, maSlowLength)

plotColour = (maFast > maSlow) ? lime : #DC143C // Crimson red

These moving averages are calculated with wma(), a function that needs a series of values and an integer for the WMA length (TradingView, n.d.). The first wma() statement uses closing prices (close) and its length in bars is set with the maFastLength input variable. We store these WMA values in the maFast variable. The second moving average is computed similarly, except that the length is set with the maSlowLength variable and the values are stored in maSlow.

Next we make the plotColour variable, which is given a colour value conditionally with the conditional ternary operator (?:). This operator evaluates a condition and, when that condition is true, returns the second value while the third value is returned when the condition is false (Pine Script Language Tutorial, n.d.). The condition that’s checked here is whether the current value of maFast is greater than (>) the value of maSlow. When the 15-bar WMA is indeed above the 50-bar WMA, the lime colour variable is stored in plotColour; otherwise, the #DC143C hexadecimal colour value for crimson red is put into that variable.

We then use plotColour when plotting the WMA values:

fastPlot = plot(series=maFast, color=plotColour, linewidth=2)
slowPlot = plot(series=maSlow, color=plotColour, linewidth=2)

The plot() function displays, by default, data as a connected line (TradingView, n.d.). In the first plot() function call we set its series argument to maFast and the colour (color) of this line to plotColour. The plot’s width (linewidth), which ranges from 1 (default) to 4, is set to 2. With the second plot statements we display the maSlow values on the chart.

Note that each plot object is stored in a variable (fastPlot and slowPlot). These objects are then used to fill the background area between the lines:

fill(plot1=fastPlot, plot2=slowPlot, color=blue, transp=90)

Here we set the fill() function’s plot1 and plot2 arguments to fastPlot and slowPlot. The background between these plot objects is filled with the blue basic TradingView colour and made highly transparent (transp=90).

Colouring the background between two moving averages

When the example indicator discussed above is added to a chart, it looks like:

Example of colouring the TradingView background between plots

On a EuroStoxx50 CFD chart it looks as follows:

Colouring a background section of a TradingView chart

The two input options look like this:

Input options of the TradingView example script

Example: colouring the chart area between two horizontal lines

Besides filling the area between two plots, fill() can also colour the chart’s background that’s between two horizontal lines. For example:

study(title="Stochastic with lines", overlay=false)

// Create and plot stochastic
stochastic = stoch(close, high, low, 14)
plot(series=stochastic, color=#4169E1, linewidth=2) // royal blue

// Create oversold lines
os1 = hline(price=20, color=silver)
os2 = hline(price=0, color=silver)

// Fill background between lines
fill(hline1=os1, hline2=os2, color=red, transp=90)

fill(hline1=hline(price=80, color=silver),
     hline2=hline(price=100, color=silver),
     color=green, transp=90)

We start with the mandatory study() function. Then we calculate and plot a stochastic value:

stochastic = stoch(close, high, low, 14)
plot(series=stochastic, color=#4169E1, linewidth=2) // royal blue

The stoch() function that we use here requires four values: the source series, the high and low values, and the length in number of bars (TradingView, n.d.). Once the stochastic value is calculated with the instrument’s close, high, and low prices over a 14-bar period, the value is stored in the stochastic variable with the assignment operator (=).

We subsequently display the stochastic value on the chart by setting the series argument of the plot() function to stochastic. This line is coloured royal blue (hexadecimal #4169E1) and slightly thicker than normal (linewidth=2).

Then we create two horizontal lines and fill the background between them:

os1 = hline(price=20, color=silver)
os2 = hline(price=0, color=silver)

fill(hline1=os1, hline2=os2, color=red, transp=90)

The lines are made with hline(), a function that renders a horizontal line at a given price level (Pine Script Language Tutorial, n.d.). The first line, whose object we store in the os1 variable, has its price argument set to 20 and made silver. The second line is similar, although this line is placed at 0 and assigned to the os2 variable.

We then fill the background between the lines. For that we set the fill() function’s hline1 argument to the os1 variable while the hline2 argument is set to the object stored in the os2 variable. This background section is shaded red (color=red) with a transparency (transp) of 90.

Then we highlight the overbought stochastic area:

fill(hline1=hline(price=80, color=silver),
     hline2=hline(price=100, color=silver),
     color=green, transp=90)

Here we use the fill() function again. But instead of creating two lines and storing their objects in variables, we immediately create the horizontal lines in the body of the fill() function. This works because this function’s hline1 and hline2 arguments require a horizontal line object (Pine Script Language Tutorial, n.d.), and such an object is returned by the hline() function (TradingView, n.d.). That means we can skip the intermediate step of creating line object variables.

The horizontal lines that we make here are coloured silver and have values of 80 and 100. The background fill itself is set to green and this TradingView colour variable is made highly transparent (transp=90).

Colouring the area between overbought and oversold lines

The above example indicator looks like the following:

Colouring the background area between horizontal lines in TradingView Colouring the TradingView background between horizontal lines

For more applications of the fill() function, see shading support and resistance areas. Other TradingView functions that accept colour values includes those that colour price bars and fill the entire background. See the list of hexadecimal TradingView colours for a lot of different colours.

Summary

The fill() function colours a part of the chart’s background. It does so by filling the area between two plot objects (which are returned by the plot() function) or two horizontal line objects, which the hline() function returns. The color argument of the fill() function can be set to any colour variable or hexadecimal colour value, while the transp argument sets the filled background’s transparency ranging from 0 (no transparency) to 100 (a fully transparent, invisible background).


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 November 19, 2015, from https://www.tradingview.com/study-script-reference/