In TradingView we can colour the chart’s background, and with that feature we can colour the background conditionally and combine coloured backgrounds. But how do we use a coloured background to highlight certain time periods, like the forex market sessions?

In this article:

Colouring the background of forex sessions in TradingView

The basic TradingView colours as well as the hexadecimal colour values can be used with several TradingView functions, including bgcolor(). That function colours a bar’s full background from top to bottom (Pine Script Language Tutorial, n.d.) in the area where the script displays (so a subchart or the main price chart). We take a closer look at this function in colouring the background of a TradingView chart.

We can use bgcolor() once or several times in the same script. When used repeatedly, the coloured backgrounds are placed on top of each other and the bgcolor() function that’s executed last will create the uppermost coloured background. With this feature we can, for example, colour the background based on the general trend condition and then colour price bars again when the actual buy and sell signals happen.

Another use of bgcolor() is to colour the background of trading sessions, and that also creates overlaid backgrounds when sessions overlap. To see how that works in TradingView, in this article we’re coding an indicator that colours the background of the following forex trading sessions (Babypips.com, n.d.):

Forex market session Time (UTC-5)
New York 8:00 - 17:00
London 3:00 - 12:00
Tokyo 18:00 - 3:00
Sydney 16:00 - 1:00

Before we can programmatically colour the background of these sessions, we first need to figure out if a bar falls inside the New York, London, Tokyo, or Sydney session. We can do that with the time() function that accepts two arguments: the bar’s resolution and the trading session (TradingView, n.d.). This function then returns the bar’s time (when the bar falls inside the session) or NaN when the bar is outside the session (Pine Script Language Tutorial, n.d.). This way we determine if a bar is inside a session, and then conditionally colour the bar’s background when that’s the case.

Tip: Sessions in TradingView are always defined in the exchange time zone (Admin, 2015). That’s why the above table is already adjusted to UTC-5 (the time zone of the FXCM ‘exchange’ in TradingView). Besides this, the chart’s time zone also needs to be set to ‘Exchange’ to have the example indicator that’s discussed below work properly. To set a chart to that time zone, right-click on the chart and select ‘Properties’. Then move to the ‘Timezone/Sessions’ tab:
Setting the time zone of a TradingView chart to 'Exchange'

Now, let’s discuss how to colour the background of the forex trading sessions.

Programmatically colouring the background of forex sessions in TradingView Pine

Our example indicator colours the background of up to four forex sessions. Since the London session overlaps with New York and Tokyo trades at the same time as Sydney, we’ll have have partially overlapping background colours. After reviewing the code we’ll look at images of the indicators and its input options, but first things first:

study(title="Forex trading sessions", overlay=true)

// Inputs
nySession   = input(title="New York session", type=session, defval="0800-1700")
showNy      = input(title="Display New York session?", type=bool, defval=true)
lonSession  = input(title="London session", type=session, defval="0300-1200")
showLon     = input(title="Display London session?", type=bool, defval=true)
tokSession  = input(title="Tokyo session", type=session, defval="1800-0300")
showTok     = input(title="Display Tokyo session?", type=bool, defval=true)
sydSession  = input(title="Sydney session", type=session, defval="1600-0100")
showSyd     = input(title="Display Sydney session?", type=bool, defval=true)

// Constants for colours
nyColour  = #4169E1             // royal blue
lonColour = #FF6347             // tomato
tokColour = #CD853F             // peru
sydColour = #3CB371             // medium sea green

// InSession() determines if a price bar falls inside the specified session
InSession(sess) => na(time(period, sess)) == false

// Colour the background of each session
bgcolor(color=InSession(nySession)[1] and showNy ? nyColour : na,
     title="New York", transp=85)
bgcolor(color=InSession(lonSession)[1] and showLon ? lonColour : na,
     title="London", transp=85)
bgcolor(color=InSession(tokSession)[1] and showTok ? tokColour : na,
     title="Tokyo", transp=85)
bgcolor(color=InSession(sydSession)[1] and showSyd ? sydColour : na,
     title="Sydney", transp=85)

We begin with the study() function to specify the indicator’s name. With its overlay argument set to true the script displays in the main chart area and not in a separate subchart (TradingView, n.d.).

Then we create several input options:

nySession   = input(title="New York session", type=session, defval="0800-1700")
showNy      = input(title="Display New York session?", type=bool, defval=true)
lonSession  = input(title="London session", type=session, defval="0300-1200")
showLon     = input(title="Display London session?", type=bool, defval=true)
tokSession  = input(title="Tokyo session", type=session, defval="1800-0300")
showTok     = input(title="Display Tokyo session?", type=bool, defval=true)
sydSession  = input(title="Sydney session", type=session, defval="1600-0100")
showSyd     = input(title="Display Sydney session?", type=bool, defval=true)

These manual inputs are made with input(), a function that creates an input option in the script’s settings and that also returns the input’s current value (TradingView, n.d.). We store those values in variables here with the assignment operator (=). This way we can refer to the input’s current value later on in the code.

We make two kind of inputs options here. The first are time range inputs. These define the New York, London, Tokyo, and Sydney sessions and are made by setting the input() function’s type argument to session (Pine Script Language Tutorial, n.d.). A descriptive name (like “New York session”) is placed before each input with the title argument.

To set the default value for a session input, we set the defval argument to a string with the session in 24-hour format. And so the “New York session” input has its standard value set to "0800-1700" while the Tokyo time range is specified as "1800-0300". The current values of these manual session inputs are stored in the nySession, lonSession, tokSession, and sydSession variables.

The other input options are all Boolean true/false inputs. These checkboxes are made by setting the input() function’s type argument to bool (Pine Script Language Tutorial, n.d.), and we store their current values in the showNy, showLon, showTok, and showSyd variables. We’ll use these inputs later on to turn the coloured backgrounds on or off.

Since input() returns the input’s current value, these variables will be true when their checkbox is enabled and false when that option is disabled. All true/false inputs are enabled by default (defval=true) and given a descriptive name with the title argument (like “Display New York session?” and “Show Sydney session?”).

Then we define several colours:

nyColour  = #4169E1             // royal blue
lonColour = #FF6347             // tomato
tokColour = #CD853F             // peru
sydColour = #3CB371             // medium sea green

Each of these variables is assigned a hexadecimal colour value. By putting these colours in a variable it’s easier to reference the correct colour later on, and this is especially helpful in scripts with a lot of code and where the same colour is used repeatedly.

After that we create a custom single-line function:

InSession(sess) => na(time(period, sess)) == false

A custom function has the benefit that we only need to code it once, and then can use it as many times as needed in our script. That reduces the amount of code (and the potential for errors), and we then only need to change the function to have its behaviour change everywhere in the script.

Creating a single-line line is done by specifying the function’s name, the arguments that it takes between parentheses (( and )) followed by the function declaration operator (=>), and then the function’s expression (Pine Script Language Tutorial, n.d.). In our forex sessions script, we create a custom function that’s named InSession and has one argument (sess). Inside the function we evaluate whether the na(time(period, sess)) expression equals (==) false.

That expression is evaluated from the inside-out and so the time() function is executed first. The two arguments used with this function are sess (which, in turn, is the argument of our custom InSession() function) and period. That built-in variable returns the bar’s resolution (TradingView, n.d.). With these two arguments, time() either returns the bar’s time when it falls inside the specified session or returns a NaN (“not a number”) value otherwise (TradingView, n.d.).

The na() function then deals with a possible NaN value. This function returns 1 (the equivalent of true) if the value inside its parentheses is NaN (TradingView, n.d.). This means that, when time() returns NaN to signal that the current bar is outside the specified session, then na() returns true. However, we’re not interested in bars that fall outside a session but want to know which bars are inside a session. And so we check if the value returned by na() equals (==) false. That condition evaluates to true whenever time() returns the bar’s time (signalling that the bar is inside the session) since na() will return false then.

So what our InSession() function does is to return true when the current bar is inside the specified session and return false when the bar isn’t in that session.

After creating the function, we colour the background of each trading session:

bgcolor(color=InSession(nySession)[1] and showNy ? nyColour : na,
     title="New York", transp=85)
bgcolor(color=InSession(lonSession)[1] and showLon ? lonColour : na,
     title="London", transp=85)
bgcolor(color=InSession(tokSession)[1] and showTok ? tokColour : na,
     title="Tokyo", transp=85)
bgcolor(color=InSession(sydSession)[1] and showSyd ? sydColour : na,
     title="Sydney", transp=85)

The background colouring is done with bgcolor(), and the color argument of these four bgcolor() statements is set to a value returned by the conditional (ternary) operator (?:). This operator evaluates a condition and, when that condition is true, the operator’s second value is returned. Should the condition be false, then its third value is returned (Pine Script Language Tutorial, n.d.).

The first bgcolor() statement colours the background of the New York session, and its conditional operator checks if InSession(nySession)[1] and showNy are true. Since we combine these expressions with the and logical operator, both need to be true before their combined condition is also true (Pine Script Language Tutorial, n.d.).

So we first use the InSession() function with the nySession input variable, which holds the "0800-1700" range by default. As we discussed above, this custom function returns true when the current bar falls inside the specified session. However, the time of TradingView’s bars is the closing time, meaning that the 8:00 bar isn’t the first of that session but instead contains the price action just prior to the New York session open. That’s why we place the history referencing operator ([]) with a value of 1 just after InSession() to introduce a lag of one bar. Now, on a 30-minute chart, the 8:30 bar is seen as the first bar of the session while 17:00 concludes the session.

The second expression is simply showNy, our true/false input variable that holds the value of the “Display New York session?”. This input is enabled (true) by default and used here to enable or disable the New York session background. That’s done with the conditional operator, which set the color argument of the bgcolor() function either to the nyColour variable (that holds royal blue) or na. That built-in variable represents a “not a number” value (TradingView, n.d.) that, when used with colouring, generates an invisible colour (see Pine Script Language Tutorial, n.d.).

This has the effect of colouring the background conditionally: should the current bar be inside the New York session and the “Display New York session?” input is enabled, then we colour the chart’s background royal blue. If the bar is not inside that session and/or that input is disabled, then the background isn’t coloured.

The two other arguments that we specify in this bgcolor() statement are title and transp. The first sets the name of the background, and this name is displayed in the script’s ‘Style’ window when manually changing the script’s colours. By giving the background a descriptive name we can easily identify it in that settings window. The other argument, transp, sets the background’s transparency ranging from 0 (fully solid) to 100 for fully invisible (TradingView, n.d.). We set this argument to 85 here for a reasonably transparent background.

The next three bgcolor() function calls are nearly identical to the first. In each we check with InSession() if the bar falls inside the specified session (held by the lonSession, tokSession, and sydSession input variables). And when their checkbox is enabled (stored in the showLon, showTok, and showSyd variables), then we colour the background with one of the previously defined colour variables (lonColour, tokColour, or sydColour); otherwise, the background is set to na.

Note: When backgrounds overlay on top of each other (as happens here with the overlapping forex sessions), then the bgcolor() function that’s executed last creates the topmost background. This means that changing the order of the bgcolor() statements affects how the chart looks. See combining coloured TradingView backgrounds for more.

Example: highlighting forex market sessions in TradingView

When we add the above example to a GBP/USD chart, it looks like:

Example of colouring the background of forex sessions in TradingView

And our script looks like this when added to a 15-minute EUR/USD chart:

Colouring the background of forex market hours in TradingView

The indicator has the following input options:

Input options of our TradingView script example

If we, for example, disable the London and Tokyo sessions through with these inputs, then the previous EUR/USD chart becomes:

Highlighting forex sessions on a TradingView chart

Now changing the Sydney session end time to 3:00 (instead of the default 1:00) and letting the New York session start 2 hours earlier changes the chart to:

Colouring forex market hours in TradingView

A TradingView script’s colours can be configured manually in its ‘Style’ window, and there we also see the descriptive names that we gave our backgrounds:

Example of manually changing a TradingView script's colours

Other applications of the bgcolor() function are offsetting a coloured background and conditionally colouring a background. We discussed this function and its arguments in colouring a TradingView background. Whereas bgcolor() colours the chart’s full background from top to bottom, it’s also possible to colour a background section with the fill() function. Both functions accept basic TradingView colours and hexadecimal colour values.

Summary

The bgcolor() function sets the chart’s background from top to bottom to the colour specified with its color argument. This function either colours the main chart area or the script’s subchart, depending on where the script displays. When we use several bgcolor() statements in our code, then the order of these function calls matters: the first bgcolor() statement colours the main background, while the background coloured by the subsequent bgcolor() function calls is placed on top of the previously made background.


References

Admin (October 5, 2015). time() only works with exchange time chart? Discussion topic. Retrieved on October 8, 2015, from https://getsatisfaction.com/tradingview/topics/-time-only-works-with-exchange-time-chart

Babypips.com (n.d.). When Can You Trade Forex: Forex Trading Sessions. Retrieved on December 18, 2015, from http://www.babypips.com/school/preschool/when-can-you-trade-forex/trading-sessions.html

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