With the TradingView Pine feature that allows for colouring a background section we can also fill the background between support and resistance areas and shade the chart section that’s between a plot and horizontal line. But how do we fill the background between non-typical plots, like circles and crosses?

In this article:

Filling the TradingView background between circles and crosses

We can configure colours used in a TradingView script either by hand or program them directly into the script’s source code. That latter makes things like using colours conditionally possible. The colours that we can use in a script are the hexadecimal colour values and the basic TradingView colours.

Several TradingView functions have a color argument that we can set to a colour value (TradingView, n.d.). One of those functions is fill(), which colours the chart’s background that’s between two plots or two horizontal lines (Pine Script Language Tutorial, n.d.). We take a closer look at this function and its arguments in colouring a part of the TradingView background.

To know which chart area to fill with a colour, fill() either needs two horizontal line objects (these are returned by the hline() function) or two plot objects, which the plot() function returns (TradingView, n.d.). These objects represent an instance of the plot or horizontal line, and this is similar to how a numerical variable represents a certain number.

fill() is typically used to fill the background between two lines (as we did when shading the background between lines). But this function can actually colour the area between any plots made with plot(), and that function can make a histogram, crosses, area, columns, circles, or the default line plot (TradingView, n.d.). In the example below we’re going to fill the background between circles and crosses; see colouring the background around histograms and columns and filling an area around an area plot for examples that use fill() with the other plot styles.

Colouring the TradingView background between circles and crosses

In the example below we use the fill() function to colour the background between plots that consist out of circles (displayed as filled dots) and crosses, which are plotted as plus signs (+). Our example indicator plots a pair of EMAs (Exponential Moving Averages), and above and below these lines we’ll make additional plots based on the difference between the two moving averages. Later in the article we’ll look at how the indicator looks like, but let’s first discuss the script’s code:

study(title="Circles & crosses fill", overlay=true)

// Calculate values
quickEMA = ema(close, input(title="Quick EMA", type=integer, defval=30))
slowEMA  = ema(close, input(title="Slow EMA", type=integer, defval=60))

emaDiff = quickEMA - slowEMA

// Plot & fill EMAs
ema1 = plot(series=quickEMA, style=line, color=black)
ema2 = plot(series=slowEMA, style=line, color=black)

fill(plot1=ema1, plot2=ema2, color=gray, transp=80)

// Plot & fill circles
circ1 = plot(series=quickEMA - 2 * emaDiff, style=circles, 
     color=red, linewidth=2)
circ2 = plot(series=quickEMA - 3 * emaDiff, style=circles, 
     color=red, linewidth=2)

fill(plot1=ema2, plot2=circ1, color=maroon, transp=90)
fill(plot1=circ1, plot2=circ2, color=maroon, transp=90)

// Plot & fill crosses
cross1 = plot(series=quickEMA + 2 * emaDiff, style=cross, 
     color=green, linewidth=2)
cross2 = plot(series=quickEMA + 3 * emaDiff, style=cross, 
     color=green, linewidth=2)

fill(plot1=ema1, plot2=cross1, color=#228B22, transp=90)
fill(plot1=cross1, plot2=cross2, color=#228B22, transp=90)

We first include the required study() function. Then we calculate two EMAs and compute the difference between them:

quickEMA = ema(close, input(title="Quick EMA", type=integer, defval=30))
slowEMA  = ema(close, input(title="Slow EMA", type=integer, defval=60))

emaDiff = quickEMA - slowEMA

The EMA values are returned by the ema() function, which requires a series of values and an integer that sets the moving average length (TradingView, n.d.). Here, both ema() statements are set to close to make them calculate on the closing prices of the instrument that the script is added to.

The second argument of both ema() functions is set to the input() function. That seems a little odd, however, this function creates a manual input option and returns that setting’s current value (TradingView, n.d.). Normally we would assign that returned value to a variable, and then use the variable whenever we want to use the input option’s current value. But here we’ve just skipped the ‘variable step’ and use the input() function immediately in the location where we want to use the input’s value (namely, in the ema() function).

Both of the input() functions have their type argument set to integer to create numerical integer inputs. We name the first one “Quick EMA” and the second one is called “Slow EMA” in the script’s options window (see image further down below). The default values (defval) of these inputs are set to 30 and 60.

The EMA values that ema() computes are assigned to the quickEMA and slowEMA variables. We then subtract these variables from each other and store the difference in the emaDiff variable. After that we plot the EMAs on the chart and fill the background between them:

ema1 = plot(series=quickEMA, style=line, color=black)
ema2 = plot(series=slowEMA, style=line, color=black)

fill(plot1=ema1, plot2=ema2, color=gray, transp=80)

The EMA values are displayed with plot(), a function that plots the data set by its series argument on the chart (TradingView, n.d.). In the first plot() function call we set that argument to the quickEMA variable. This plot’s style is set to a line (style=line) that’s plotted with the black standard TradingView colour. After that we assign the plot object (that’s returned by plot()) to the ema1 variable. The second plot() statement is similar, except that now we plot the slowEMA values and use the assignment operator (=) to put the accompanying plot object in the ema2 variable.

With fill() we then colour part of the background area that’s between the first and second EMA. The plot1 and plot2 arguments, that specify between which plot objects the background should be coloured (TradingView, n.d.), are set to the ema1 and ema2 plot objects. We colour this filled background area gray and set its transparency (transp), which ranges from 0 (not transparent) to 100 for fully invisible (TradingView, n.d.), to 80 for a modestly transparent background.

Then we plot circles on the chart and fill the background between them:

circ1 = plot(series=quickEMA - 2 * emaDiff, style=circles, 
     color=red, linewidth=2)
circ2 = plot(series=quickEMA - 3 * emaDiff, style=circles, 
     color=red, linewidth=2)

fill(plot1=ema2, plot2=circ1, color=maroon, transp=90)
fill(plot1=circ1, plot2=circ2, color=maroon, transp=90)

We plot data as circles (which display as filled dots) by setting the plot() function’s style argument to circles (TradingView, n.d.). With the first plot() statement we plot the quickEMA value minus 2 multiplied with the difference between the EMAs (2 * emaDiff), while the second plot() statement displays the quickEMA value minus 3 * emaDiff. Both plots present the circles with the red basic TradingView colour and a size (linewidth) of 2. We store the returned plot objects in the circ1 and circ2 variables.

Then we colour the background around these circles. In the first fill() function call we set the plot1 and plot2 arguments to the ema2 line plot and the circ1 circles plot. This fills the background area between the slower EMA and the quick EMA value subtracted with 2 times the EMA difference. In the second use of fill() we colour the background that’s between the circ1 and circ2 circle plots. Both fill() functions have their color argument set to maroon and their transparency (transp) given a value of 90, which gives a highly transparent background colouring.

The example ends with plotting crosses and filling the background around them:

cross1 = plot(series=quickEMA + 2 * emaDiff, style=cross, 
     color=green, linewidth=2)
cross2 = plot(series=quickEMA + 3 * emaDiff, style=cross, 
     color=green, linewidth=2)

fill(plot1=ema1, plot2=cross1, color=#228B22, transp=90)
fill(plot1=cross1, plot2=cross2, color=#228B22, transp=90)

We display two series of data here with plot(): the first are quickEMA values plus 2 times the difference between the EMAs (2 * emaDiff), whereas the second plots the fast EMA plus 3 times the EMA difference (quickEMA + 3 * emaDiff). Both plot() functions display as a series of crosses (style=cross) in the green basic TradingView colour. We assign their plot objects to the cross1 and cross2 variables. The linewidth argument, that accepts values from 1 to 4 (TradingView, n.d.), is set to 2 to make both plots a bit bigger than their default size.

After plotting the crosses, we use fill() to fill the background section around them. In the first plot() statement we set the plot1 and plot2 arguments to the ema1 line and cross1 crosses plot. This colours the background between the fast EMA and 2 times the EMA difference added to the fast EMA. The plot1 and plot2 arguments of the next fill() function call are set to cross1 and cross2 to colour the area between these crosses plots. Both fill() statements have their color argument set to #228B22 (the hexadecimal colour value for forest green) and are displayed as highly transparent (transp=90).

Colouring the TradingView background between crosses and circles

The above example indicator added to a GBP/USD chart looks as follows:

Example of colouring the background between TradingView crosses and circles

And the plots and the filled backgrounds look like this on a EUR/USD chart:

Colouring the background of a TradingView chart

The two inputs that we made with the input() function display as follows:

Example of the input options of the TradingView script

When we change these inputs to, for example, 20 for the ‘Quick EMA’ and 90 for the ‘Slow EMA’, then the previous EUR/USD chart becomes:

Highlighting price areas on a TradingView chart

Other uses of the fill() function are shading the background of support and resistance areas and filling the background between a plot and horizontal line. We can also fill the background around histogram and columns plots and use an area plot with fill(). The colours that we can use with functions like fill() are the basic TradingView colours and any of the hexadecimal colour values.

Summary

The fill() function colours the background area that’s between two plots or two horizontal lines. To determine which chart section to colour, it either needs two horizontal line objects or two plot objects. These plot objects are returned by plot(). That function can display a series of data on the chart in different styles, like line for a default line plot, circles for small dots, or cross for small crosses. The fill() function can colour the background between any two plots made by plot(), regardless of the plot style that we use.


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