In TradingView we can colour part of the chart’s background, and with that feature we can also shade the background between a plot and horizontal line as well as highlight support and resistance areas. But how do we use this feature to colour the background that’s between a histogram and columns plot?

In this article:

Colouring part of the background in TradingView

Colours used by a TradingView script can be configured manually or set programmatically, with that latter allowing for things like using colours conditionally. The colour values that we can use in our code are the basic TradingView colours and hexadecimal colour values.

Setting a section of the chart’s background to one of those colour values is done with fill(). In order to know which background area needs to be coloured, this function requires two plot objects or two horizontal line objects (Pine Script Language Tutorial, n.d.; TradingView, n.d.). Those objects are returned by the plot() and hline() functions (TradingView, n.d.), and they represent an instance of the plot or line. For an outline of the fill() function and its arguments, see colouring part of the chart’s background in TradingView.

The typical use of fill() is to colour a background area between lines made with plot(). But the plot() function can also make a histogram, cross, area, columns, and circles plot (TradingView, n.d.). That means we’re not limited to filling the background between lines, but can also colour the background between circles and crosses and fill a background section around a TradingView area plot. In the example below, we’ll look at how to use the fill() function with a histogram and columns plot.

Plotting vertical bars in TradingView: histogram and columns plot

Before discussing the TradingView example, let’s clarify the difference between a histogram and columns plot. While both chart columns, the difference between them is that the bars of a columns plot are next to each other while histogram bars are standing apart.

So when we plot the volume with a histogram and columns plot, the chart would look like:

Difference between a histogram and columns plot in TradingView

Now let’s discuss how the fill() function can be used with these kinds of plots.

Filling the TradingView chart area around histograms and columns

In the example we’re plotting up and down volume. We define ‘up volume’ as the volume of bars that closed higher and ‘down volume’ as the volume of bars closing lower. These volume values are plotted with a histogram and columns plots, and we use lines for the extreme values and an average. After discussing the code, we’ll look at how the indicator looks like on the chart. But first, the code:

study(title="Filling with histogram and columns", 
     shorttitle="Up/down volume", precision=0)
     
// Inputs
highLen = input(title="Highest length", type=integer, defval=20)
lowLen  = input(title="Lowest length", type=integer, defval=20)
smaLen  = input(title="SMA length", type=integer, defval=20, 
     minval=5, maxval=100)

// Compute values
upVolume   = (close > open) ? volume : 0
downVolume = (close < open) ? -volume : 0

highestUp  = highest(upVolume, highLen)
lowestDown = lowest(downVolume, lowLen)

// Plot histogram and columns
upHist   = plot(series=upVolume, style=histogram, color=green, linewidth=3)
downCols = plot(series=downVolume, style=columns, color=red)

// Plot lines
hiVol  = plot(series=highestUp, style=line, color=green)
lowVol = plot(series=lowestDown, style=line, color=red)

avgVol     = sma(volume, smaLen)
avgVolPlus = plot(series=avgVol, style=line, color=#1E90FF)
avgVolMin  = plot(series=-avgVol, style=line, color=#1E90FF)

// Fill background areas
fill(plot1=hiVol, plot2=avgVolPlus, color=green, transp=85)
fill(plot1=avgVolPlus, plot2=upHist, color=lime, transp=90)

fill(plot1=lowVol, plot2=avgVolMin, color=red, transp=85)
fill(plot1=avgVolMin, plot2=downCols, color=#D2691E, transp=90)

The script starts with study(), a function that every indicator needs to have (TradingView, n.d.). We set three of its arguments here: title and shorttitle (which specify the indicator’s name) and precision. That latter argument defines the number of digits displayed after the floating point and, with a value of 0 as used here, replaces the last three values of large numbers in the thousands with ‘K’ (TradingView, n.d.).

Then we add three input options to the script:

highLen = input(title="Highest length", type=integer, defval=20)
lowLen  = input(title="Lowest length", type=integer, defval=20)
smaLen  = input(title="SMA length", type=integer, defval=20, 
     minval=5, maxval=100)

These inputs are made with input(), a function that adds a manual input to the script’s settings and also returns that input’s current value (TradingView, n.d.). By assigning those returned values to a variable, we can refer to the input’s current value later on by using the variable.

All three inputs are numerical integer inputs, and we make these by setting the input() function’s type argument to integer. The first input has its title argument set to “Highest length”, and this text is what’s placed before the input in the script’s settings (the image further below shows the inputs). We set the default value (defval) of this input to 20 and store its current value in the highLen input variable.

The second input has the same default value as the first and we name this one “Lowest length” and store its value in the lowLen variable. The third and last input is titled “SMA length” and has two arguments that the other inputs don’t have: minval and maxval. The first sets the minimum value for this input, while the second defines the maximum allowed value (TradingView, n.d.). This way we create an allowed range of 5 till 100, and so the smaLen input variable cannot have a value that’s outside of this range.

Next up we create some additional variables:

upVolume   = (close > open) ? volume : 0
downVolume = (close < open) ? -volume : 0

highestUp  = highest(upVolume, highLen)
lowestDown = lowest(downVolume, lowLen)

The upVolume and downVolume variables are given their value with the conditional ternary operator (?:) here. This operator evaluates a condition and, when that condition is found true, returns its second value. When the condition is false, the operator returns its third value (Pine Script Language Tutorial, n.d.). This means that the upVolume variable is assigned the bar’s volume (volume) whenever the bar’s closing price is greater than its open (close > open). When that’s the case (meaning that the bar closed lower or unchanged), then the conditional operator returns 0 and that value is subsequently put into the upVolume variable.

The downVolume variable is assigned a value similarly, except here we check if the bar closed lower (close < open) and return the opposite of the bar’s volume (-volume) when that happens. We do this so we can plot a histogram with positive up volume values and a columns plot with negative down volume readings.

We then use the highest() and lowest() functions to get the highest up and lowest down volume values so we can plot these on the chart. Both functions accept a series of values to process plus an integer that sets the number of bars to calculate on (TradingView, n.d.). For computing the highest up volume, we pass the upVolume variable alongside the highLen input variable in the highest() function. That calculates, when this input is set to its default value, the 20-bar high of the up volume. We store that value in the highestUp variable. The lowest down volume is calculated likewise by passing in the downVolume and lowLen variables in the lowest() function, followed by storing that value in the lowestDown variable.

We then create the histogram and columns plot:

upHist   = plot(series=upVolume, style=histogram, color=green, linewidth=3)
downCols = plot(series=downVolume, style=columns, color=red)

These plots are made with plot(), a function that displays the data on the chart that’s specified by its series argument (TradingView, n.d.). In the first plot() function call we set that argument to the upVolume variable and set the function’s style argument to histogram. This way the up volume is plotted as a histogram. The histogram’s colour is set to the green standard TradingView colour and its linewidth, which sets the plot’s width from 1 to 4 (TradingView, n.d.), is set to 3 to create reasonably thick histogram bars. The plot object that’s returned here is stored in the upHist variable.

In the second plot() statement we display the downVolume values on the chart. This data is displayed as a columns plot (style=columns) and coloured red (color=red). This plot’s object is assigned to the downCols variable.

After that we plot the highest, lowest, and average values as lines on the chart:

hiVol  = plot(series=highestUp, style=line, color=green)
lowVol = plot(series=lowestDown, style=line, color=red)

avgVol     = sma(volume, smaLen)
avgVolPlus = plot(series=avgVol, style=line, color=#1E90FF)
avgVolMin  = plot(series=-avgVol, style=line, color=#1E90FF)

The highest and lowest volume values (highestUp and lowestDown) that we’ve computed a moment ago are plotted here with plot(). Both are displayed as a line (style=line) and coloured green or red. Note that plot() by default plots data as a line (TradingView, n.d.). However, by adding style=line we make it clear that these values are plotted as a line.

We then calculate the average volume with the sma() function, which computes a Simple Moving Average (SMA) based on a series of values alongside an integer that sets the SMA length (TradingView, n.d.). Here we base that moving average on the bar’s volume and set its length to the smaLen input variable, which we gave a default value of 20 earlier. The value returned by sma() is stored in the avgVol variable.

That variable is then used to plot the average volume as both a positive and negative value. This makes the average display on the chart area with the histogram (that shows positive up volume values), but it also shows the average value around the columns plot that show the negative down volume values.

To make that happen, we call the plot() function twice. The first time we set the series argument to the average volume (avgVol); the second time to its negative (-avgVol). Both plot() statements have their style argument set to line and their color argument given the #1E90FF hexadecimal colour value of dodger blue. The plot objects that are returned here are stored in the avgVolPlus and avgVolMin variables; that way we can use these plots with the fill() function.

After plotting the histogram, columns, and line plots it’s finally time to fill several background areas:

fill(plot1=hiVol, plot2=avgVolPlus, color=green, transp=85)
fill(plot1=avgVolPlus, plot2=upHist, color=lime, transp=90)

fill(plot1=lowVol, plot2=avgVolMin, color=red, transp=85)
fill(plot1=avgVolMin, plot2=downCols, color=#D2691E, transp=90)

Here we colour the background between several plots with the fill() function. For this we set the plot1 and plot2 arguments of each fill() function to a variable that we assigned a plot object earlier.

In the first fill() statement we colour the background that’s between the hiVol and avgVolPlus plots, which are the line plots with the highest up volume and the average volume. That area is coloured with the green basic TradingView colour and has its transparency (transp) set to 85. The second fill() function call fills the background between the avgVolPlus line plot and the upHist histogram that shows the up volume. This lime green chart area is made highly transparent (transp=90).

The third fill() statement uses red for the background colour between the lowVol line (which displays the lowest down volume) and the avgVolMin average volume line. We end the example with another fill() function call. This one fills the background between the avgVolMin average volume line and the downCols columns plot. We set the colour of this background to the #D2691E hexadecimal colour value of chocolate.

Filling the background with histograms and columns

The above example indicator, when added to a S&P 500 CFD chart, looks as follows:

Example of histogram and columns in TradingView

Added to an oil our up/down volume indicator looks like:

Colouring around histograms and columns in TradingView

The script makes the following input options in the indicator’s settings:

Input options of the TradingView programming example

If we change these inputs, for example by setting ‘Highest Length’ to 15, ‘Lowest Length’ to 25, and ‘SMA Length’ to 5, then the previous UK Oil chart slightly changes to the following:

A coloured background in TradingView around histograms and columns

Other uses of the fill() function are filling the background between circles and crosses and filling background areas around a TradingView area plot. We can even fill the background between invisible plots in TradingView. The colours that functions (like fill()) can use are the basic TradingView colours and any hexadecimal colour value.

Summary

The fill() function colours the background section that’s between two plots or two horizontal lines. For this it either needs two plot objects (that are returned by the plot() function) or two horizontal line objects, which the hline() function returns. fill() can colour the background between any plot style, including histogram and columns plots. The difference between these is that a histogram’s bars stand apart while the bars of a columns plot are next to each other.


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