We can colour a background section in TradingView and use that feature to highlight support and resistance areas. And with a workaround we can also shade the background between a plot and horizontal line. But how can we fill the background area that’s between invisible lines?

In this article:

Colouring a chart area in TradingView with invisible plots

The colours that a TradingView script uses can either be configured manually or coded directly into the script. That latter allows for additional coding features, like using colours conditionally. When we work with colours programmatically in an indicator or strategy, we can opt for a standard TradingView colour or choose one of the numerous hexadecimal colour values.

Several TradingView functions can use any of those two colour variants by simply assigning a colour value to the function’s color argument (see TradingView, n.d.). fill() is one of those functions, and it colours the chart’s background that’s between two plots or two horizontal lines (Pine Script Language Tutorial, n.d.). For more on this function, see colouring part of the background in TradingView.

To know which part of the chart needs to be coloured, fill() requires two plot objects (which are returned by the plot() function) or two horizontal line objects that the hline() function returns (TradingView, n.d.). Those objects represent an instance of the created plot or horizontal line, similar to how a numerical variable represent a certain value.

However, those objects are only returned after we’ve created a plot or horizontal line. And so we always need to make two plots or two horizontal lines before fill() can colour the background between them. But how can we colour a background section without a visible line?

The trick is to create transparent plots with na (see Admin, 2015). That built-in variable represent a “not a number” value (TradingView, n.d.) and, when used with plot functions, makes the plot invisible by displaying it in the chart’s default colour (Pine Script Language Tutorial, n.d.). But despite being invisible, the plot is still created and so we can use its object in the fill() function.

Note: While the hline() function does accept the na value for its color argument, it won’t make the horizontal line invisible. And so using fill() to colour the background between invisible plots is only possible when those plots are made by plot().

Colouring the TradingView background between invisible lines

Let’s look at an example that displays the bar’s volume as a histogram. To place that volume into context, we’ll colour two parts of the background: one that highlights ‘high’ volume while the other signals ‘extreme’ volume. With an input option we’ll toggle between visible and invisible lines.

The example’s code is the following:

study(title="Fill with invisible lines", overlay=true, 
     scale=scale.left)

// Inputs
showLine = input(title="Display line?", type=bool, 
     defval=false)
highVol  = input(title="High volume", type=integer, 
     defval=25000, step=250)
extremeVol = input(title="Extreme volume", type=integer, 
     defval=100000, step=1000)

// Display volume histogram
plot(series=volume, color=gray, style=histogram, linewidth=4)

// Plot the horizontal lines
highLine = plot(series=highVol, color=showLine ? orange : na, 
     linewidth=3)
extremeLine = plot(series=extremeVol, color=showLine ? red : na, 
     linewidth=3)
veryExtremeLine = plot(series=extremeVol * 1.5, 
     color=showLine ? #DC143C : na, linewidth=3)

// Fill the background between the horizontal plots
fill(plot1=highLine, plot2=extremeLine, 
     color=orange, transp=85)

fill(plot1=extremeLine, plot2=veryExtremeLine, 
     color=red, transp=85)

We start with the study() function that’s required for every indicator. We set this function’s scale argument to scale.left, which makes the indicator’s values display on the left price scale instead of the default right price axis (TradingView, n.d.).

Then we add three input settings to the script:

showLine = input(title="Display line?", type=bool, 
     defval=false)
highVol  = input(title="High volume", type=integer, 
     defval=25000, step=250)
extremeVol = input(title="Extreme volume", type=integer, 
     defval=100000, step=1000)

Each of these three statements use input(), a function that not only creates a manual setting in the script’s options but also returns that setting’s current value (TradingView, n.d.). By assigning that value to a variable, we can use the variable later on in the script to refer to the input’s current value.

The first input we make is a Boolean true/false input by setting the input() function’s type argument to bool. We name it “Display line?” and give it a default value (defval) of false. This way we create a checkbox that’s unchecked (disabled) by default. We store this input’s current value in the showLine variable.

The second and third inputs are both numerical integer inputs, for which we set their type argument to integer. The first is named “High volume” with a random default value of 25,000 while the second input (“Extreme volume”) has a standard value of 100,000. The current values of these inputs are stored in the highVol and extremeVol input variables.

We set the step argument of those inputs to 250 and 1,000. This argument defines the step value that’s used for incrementing and decrementing the input’s value in the script’s settings window (TradingView, n.d.). This means that, when we click on the numerical up/down control or use the keyboard’s up and down arrow keys, these inputs’ values change with 250 and 1,000 each time.

After adding input options we plot the volume:

plot(series=volume, color=gray, style=histogram, linewidth=4)

The plot() function displays data on the chart that’s specified by its series argument (TradingView, n.d.). Here we’ve set that argument to volume, the built-in variable that returns the current bar’s volume. These volume values are displayed as a histogram (style=histogram) in the gray default TradingView colour. And with the linewidth argument set to 4 we create the thickest histogram bars possible (TradingView, n.d.).

Then we plot three horizontal lines:

highLine = plot(series=highVol, color=showLine ? orange : na, 
     linewidth=3)
extremeLine = plot(series=extremeVol, color=showLine ? red : na, 
     linewidth=3)
veryExtremeLine = plot(series=extremeVol * 1.5, 
     color=showLine ? #DC143C : na, linewidth=3)

These horizontal lines are made with plot() instead of hline() since that latter function cannot make invisible lines. The first plot() statement plots the highVol input variable as a thick line (linewidth=3). Its color argument is given a value with the conditional ternary operator (?:). That operator evaluates a condition and, when found true, returns the second value; otherwise, the operator’s third value is returned (Pine Script Language Tutorial, n.d.).

The condition that we check here is the value of showLine, the true/false input variable that we’ve created earlier. When that variable holds a value of true (so when its checkbox is enabled), then the plot’s colour is set to orange. Otherwise, its colour is set to na, the built-in variable that gives plots a transparent effect (see Pine Script Language Tutorial, n.d.). After making and colouring this line, we assign the plot object that’s returned by plot() to the highLine variable. That way we save this object for use later on with the fill() function.

Now on to the second plot() function call that has its series argument set to the extremeVol input variable and the same thickness as the first plot (linewidth=3). The colour of this second plot is also set with the conditional operator and the showLine input variable, but this time the options are either the red basic TradingView colour or the na value. After plotting this horizontal line, we store its plot object in the extremeLine variable.

The last horizontal line plots at the extremeVol input variable multiplied with an arbitrary value of 1.5. This creates an upper limit for the background area that we’re going to fill later on. The color argument of this third line is also set with the conditional operator, and now the two options are the #DC143C hexadecimal colour value of crimson red or the na value. This line’s plot object is assigned to the veryExtremeLine variable.

Now we colour the background section between these three plots:

fill(plot1=highLine, plot2=extremeLine, 
     color=orange, transp=85)

fill(plot1=extremeLine, plot2=veryExtremeLine, 
     color=red, transp=85)

The background is coloured with fill(), a function that gives the area between two plot objects or two horizontal line objects a certain colour (TradingView, n.d.). In the first fill() statement we set the plot1 and plot2 arguments (which specify the plot objects that the background is coloured between) to the highLine and extremeLine plot objects. This colours the area between 25,000 and 100,000 when the script’s inputs are kept to their default values.

The color argument of fill() is set to orange and its transp argument, which sets the background section’s transparency from 0 (not transparent) to fully transparent with 100 (TradingView, n.d.), is set to 85 for a reasonably transparent background.

The second fill() statement is very alike, although here we shade the background that’s between the extremeLine and veryExtremeLine plots with the red basic TradingView colour. With the input’s default values, this will colour the area that’s between 100,000 and 150,000.

Shading the TradingView background between invisible plots

When the above example indicator is added to a chart, it looks like this on a Dow Jones Industrial Average tracker:

Example of colouring the TradingView background

And like this on a NASDAQ-100 tracker (QQQ) with the inputs set to their defaults:

Shading the background between invisible TradingView plots

The inputs of the indicator look as follows:

Input options of the TradingView example script

When we change these inputs to, for example, the following:

Changed input settings of the TradingView Pine script

Then the previous QQQ chart becomes:

Highlighting volume on a TradingView Pine chart

Depending on your chart settings, you might need to enable the ‘Left Axis’ option before the price axis with volume values is visible. To find that option, right-click on an empty chart area and choose ‘Format…’. Or click on the gearwheel icon ( ) that’s displayed besides the instrument’s name. Either way, select the ‘Scales’ tab to find the ‘Left Axis’ option:

Enabling the left price axis in TradingView

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. The colours that fill() can use 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. For this fill() either needs two plot objects (which are returned by the plot() function) or two of the horizontal line objects that the hline() function returns. fill() can also colour the background that’s between invisible plots. To make those plots, the color argument of the plot() function needs to be set to the na built-in variable (which returns a “not a number” value). Since the lines plotted by hline() cannot be made invisible, we need to use plot() for creating invisible, horizontal lines.


References

Admin (2015, January 26). How to fill without line?. Retrieved on November 26, 2015, from https://getsatisfaction.com/tradingview/topics/how-to-fill-without-line

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/