In TradingView we can colour a section of the chart’s background and use that feature to highlight support and resistance areas. But how can we shade the chart’s background that’s between a plot and horizontal line?

In this article:

Colouring a part of the background in TradingView

The colours of a TradingView indicator or strategy can either be configured manually or programmatically. In that latter case we can use the basic TradingView colours as well one of the numerous hexadecimal colour values. Coding with colours also makes features like applying colours conditionally possible.

One way to use colours programmatically is by colouring a background section, which is what the fill() function does (Pine Script Language Tutorial, n.d.). As we discussed in colouring part of the chart’s background, the fill() function requires two plot objects or two horizontal line objects and colours the background that’s between the two objects (Pine Script Language Tutorial, n.d.; TradingView, n.d.).

Those objects represent an instance of a plot or horizontal line. Plot objects are returned by the plot() function which plots a series of data on the chart (TradingView, n.d.). And horizontal line objects are returned by hline(), a function that creates a horizontal line at a fixed price level (TradingView, n.d.).

One thing that the fill() function cannot do, however, is combine a plot object with a horizontal line object (Pine Script Language Tutorial, n.d.). Let’s look at that limitation more closely before discussing a workaround.

Colouring the TradingView background between a line and plot

An attempt to fill the background between a plot and a horizontal line is the following:

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

plotObj = plot(series=close - close[10])
lineObj = hline(price=0)

fill(plotObj, lineObj)

Here we first set the indicator’s properties with study(). Then we use plot() to plot the momentum, defined here as the difference between the current bar’s close (close) and the closing price from 10 bars ago. We retrieve that historical price with the history referencing operator ([]). After that the horizontal line is plotted at 0 with the hline() function.

That plot and horizontal line look as follows:

Example of a plot and line in TradingView

But the example doesn’t end there: it also includes the fill() function that tries to fill the background between the plot object (plotObj) and horizontal line object (lineObj). That attempt gives the following error:

Example of error message in TradingView Pine

This error message confirms that the fill() function has two versions (overloads): one that accepts two hline() objects and another one that can receive two plot() objects (Pine Script Language Tutorial, n.d.). And so fill() cannot colour the background that’s between a horizontal line and a plot. However, let’s look at a workaround for that.

Filling the background between a TradingView plot and line

oWhen make a horizontal line with plot(), instead of using hline() for that, then we can fill the background between that horizontal line and the plotted line with fill() (Pine Script Language Tutorial, n.d.). An example of that is the following, where we plot the EMA (Exponential Moving Average) of the ROC (Rate of Change) together with a horizontal line:

study(title="RoC EMA", overlay=false)

// Inputs
srcPrices = input(title="Data", type=source, defval=close)
rocLength = input(title="ROC length", type=integer, defval=12)
emaLength = input(title="EMA length", type=integer, defval=20)

// Calculate values
rocClose = roc(srcPrices, rocLength)
emaRoc   = ema(rocClose, emaLength)

plotColour = (emaRoc > 0) ? green : red

// Plot values
plotEmaRoc = plot(series=emaRoc, color=plotColour, linewidth=2)
plotHoriz  = plot(series=0, color=blue, style=circles)

// Colour background section
fill(plot1=plotEmaRoc, plot2=plotHoriz, 
     color=blue, transp=90)

We first set the indicator’s properties with study(). Then we add three input options to the script:

srcPrices = input(title="Data", type=source, defval=close)
rocLength = input(title="ROC length", type=integer, defval=12)
emaLength = input(title="EMA length", type=integer, defval=20)

These inputs are made with input(), a function which adds a manual setting to the script’s options (Pine Script Language Tutorial, n.d.) and also returns that option’s current value (TradingView, n.d.). By assigning that value to a variable, we can use the variable later on in the script to reference the input’s current value.

The first input, named “Data”, is a source type input. This kind of input allows us to select different data from the instrument that the script is applied to, like its low, high, or closing prices (Pine Script Language Tutorial, n.d.; TradingView, n.d.). We set this input’s default value (defval) to close and assign it to the srcPrices input variable. And so srcPrices, with the input’s default setting, holds the instrument’s closing prices.

The other inputs are both numerical integer inputs. The first is named “ROC length” and has a default value of 12; the second is called “EMA length” and starts with 20. We put the current value of these input options in the rocLength and emaLength variables.

Then we calculate the ROC and EMA, and determine the colour for the plotted line:

rocClose = roc(srcPrices, rocLength)
emaRoc   = ema(rocClose, emaLength)

plotColour = (emaRoc > 0) ? green : red

The Rate of Change is computed with roc(), a function needs two arguments: a series of values and the number of bars to calculate the ROC on (TradingView, n.d.). We set its first argument to the srcPrices variable, while the rocLength variable defines the function’s length. This calculates, when these input variables hold their default values, a 12-bar ROC based on closing prices. That value is then assigned to the rocValue variable.

The EMA is calculated with ema(). That function also requires a series of values as its first argument and a second argument that specifies the EMA length in number of bars (TradingView, n.d.). We set the value to calculate on to the ROC values (rocValue) while the emaLength input variable sets the length of this moving average.

We then create the plotColour variable and give this variable a value with the conditional ternary operator (?:). This operator evaluates a condition and, when that condition is true, returns its second value while its third value is returned when the condition evaluates to false (Pine Script Language Tutorial, n.d.).

The condition that we check here with the conditional operator is whether the current value of emaRoc (that is, the EMA of the ROC values) is greater than (>) 0. When that’s true, the green TradingView colour variable is returned by the conditional operator and assigned to the plotColour variable; otherwise, red is returned and stored in plotColour.

After that we plot the values on the chart:

plotEmaRoc = plot(series=emaRoc, color=plotColour, linewidth=2)
plotHoriz  = plot(series=0, color=blue, style=circles)

Both statements use plot() here, a function that displays the data as specified by its series argument on the chart (TradingView, n.d.). We first plot the emaRoc values with a colour value that’s set by the plotColour variable. That makes this line either green or red, and with the linewidth argument set to 2 we also make the line slightly thicker than normal. The plot object that’s returned by plot() is assigned to the plotEmaRoc variable; that way we can use it later on with the fill() function.

The series argument of the second plot() statement is set to 0. This way we create a horizontal line, but without the hline() function. That allows us to colour the background between a plot and horizontal line with fill(). The colour of this horizontal line plot is set to the blue basic TradingView colour and with its style argument set to circles the line’s values display as small dots. The object returned by plot() is assigned to the plotHoriz variable.

We end the example by colouring part of the chart’s background:

fill(plot1=plotEmaRoc, plot2=plotHoriz, 
     color=blue, transp=90)

Here we use the fill() function to colour the background that’s between two plot objects. The first of these (plot1) is set to the plotEmaRoc variable which holds the plot object of the EMA ROC line. The second plot argument is set to the plot object of the horizontal line (plot2=plotHoriz). We set the colour of this filled background to blue. The transp argument, which sets the background’s transparency between 0 (not transparent) and 100 (invisible) (TradingView, n.d.), is set to 90 to generate a highly transparent background.

Note: The fill() function cannot use colours conditionally (see Admin, 2014), neither with the conditional ternary operator (?:) nor with an if/else statement. Otherwise, we could have coloured the filled background below 0 red and make the background area above 0 green.

Colouring the background between a plot and a horizontal line

The above example script looks like this when added to a chart:

Colouring the TradingView background between a plot and line

On another chart, with different input settings, this TradingView indicator looks like:

Example of colouring the background in TradingView Pine

The input options that the script makes with their default values are the following:

Input options of the TradingView example script

To learn more about the fill() function, see colouring a background section in TradingView and shading support and resistance areas. The colours that functions like fill() can use are the basic TradingView colours and any hexadecimal colour value.

Summary

The fill() function colours a part of the chart’s background. For this it either fills the area between two plot objects (which are returned by the plot() function) or the background that’s between two horizontal line objects. Those latter objects are returned by the hline() function. The fill() function cannot, however, colour a background section that’s between a plot and a horizontal line. As a workaround, we can use a plot to display a horizontal line on the chart, and then use fill() to colour the background area that’s between this horizontal line and a regular plot.


References

Admin (2014, February 15). Ability to have a custom fill color based on a condition. Retrieved on November 25, 2015, from https://getsatisfaction.com/tradingview/topics/ability_to_have_a_custom_fill_color_based_on_a_condition

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