Besides working with TradingView colours programmatically, we can also customise the colours of indicators and trading strategies manually. How to do so?

In this article:

Working with colours in TradingView

The basic TradingView colours as well as the hexadecimal colours give us a lot of different colour options when visually outputting values from a script. When we create our own indicator or trading strategy, most of the time we’ll work with colours programmatically such as changing a colour conditionally.

But we can also change a script’s colours by hand. That way we can adjust a script’s colours without having to edit the code, and allows us to give multiple instances of the same script different colours. In this article we discuss how to change script colours manually. We’ll also look at programmatically adding descriptive names to plots and drawings, which helps us to know which colour we’re changing.

Manually adjusting the colours of a standard TradingView script

Changing a script’s colours by hand goes as follows. Let’s say we’ve added the MACD indicator to our instrument, making the chart look like:

Example of the MACD indicator in TradingView

To change the colour of the MACD plots we first need to open the script’s properties window. We can do that in several ways. The first approach is a right-click on one of the script’s plots (in this case, the histogram or one of the lines) and select ‘Format…’:

Formatting an indicator in TradingView

The script properties window can also be opened by double-clicking on a plot, which changes the mouse point to a small hand to signal that the plot is successfully selected:

Selecting the MACD indicator in TradingView

The third and last way to open the script properties window is to click on the gear wheel icon ( ) that’s placed to the right of the script’s name:

Formatting an indicator in TradingView

Each of these three approaches bring up the script’s settings. That window opens with the ‘Inputs’ tab selected by default. For the MACD indicator, this window shows the following settings:

The input options of the MACD indicator in TradingView

To change the colour settings we go to the ‘Style’ tab, which has the following options for the MACD indicator:

The MACD style settings in TradingView

The three colours each have their own name here (‘Histogram’, ‘MACD’, and ‘Signal’) and are set to red, blue, and orange, respectively. We change a colour by clicking on the square that displays the current colour like so:

Changing the MACD histogram colour by hand

We can also change the colour’s transparency here with the slider that’s below the grid. For instance, setting the histogram to dark blue and the transparency to approximately 25% looks like:

Setting the transparency of a TradingView indicator

Similarly, changing the colour of the MACD line requires clicking on its current colour. But instead of choosing a standard colour, let’s opt for the ‘Custom color…’ option now:

Selecting the 'Custom color' option in TradingView

This brings up a window where we can specify the saturation besides the transparency and the colour itself. With those options we can set the MACD line to the following:

Choosing a TradingView colour by hand

Once we’ve specified the colours in the ‘Style’ window, we click on ‘OK’ to make the script change its colours. In our case, that makes the MACD indicator look like:

Colours of the MACD indicator in TradingView changed

Changing the colours of a custom TradingView script

The colours of a custom TradingView script can be manually changed in the same way as discussed above. However, depending on how the script is coded it can be unclear which colour belongs to which plot. For example, let’s consider the following ‘Style’ window from a custom script:

Style window of a custom TradingView Pine script

These 9 line plots all have a different colour. But opposed to the MACD indicator (where each plot had a descriptive name), all plots are simply named ‘Plot’ here. This makes it unclear which value is plotted in which colour.

This programming code generated those unnamed plots:

study(title="Example of multiple moving averages", 
     shorttitle="MAs example", overlay=true)

ma1 = ema(close, 10)
ma2 = sma(high, 20)
ma3 = ema(close, 30)
ma4 = sma(close, 40)
ma5 = ema(low, 50)
ma6 = sma(high, 60)
ma7 = ema(close, 70)
ma8 = sma(low, 80)
ma9 = sma(close, 90)

plot(series=ma1, color=red)
plot(series=ma2, color=fuchsia)
plot(series=ma3, color=blue)
plot(series=ma4, color=orange)
plot(series=ma5, color=black)
plot(series=ma6, color=teal)
plot(series=ma7, color=maroon)
plot(series=ma8, color=navy)
plot(series=ma9, color=lime)

We start this basic example with the study() function to set the indicator’s properties. The 9 variables created next are named ma1 till ma9, and each calculates a moving average with the sma() or ema() function.

Both of those functions require a series of values to process (like close, high, or low prices) as well as an integer that specifies the number of bars to calculate the moving average on (TradingView, n.d.). The length of these moving averages ranges from 10 till 90.

After calculating the Exponential Moving Averages (EMAs) and Simple Moving Averages (SMAs) we plot them on the chart with the plot() function. That function’s series argument, that specifies which data to display on the chart (TradingView, n.d.), is set to the ma1 till ma9 variables. Each plot is set to a basic TradingView colour.

This example looks like the following when added to a chart:

Multiple moving averages plotted in TradingView

Specifying a plot or drawing title in TradingView

Manually changing the colours used in a script is easier when each plot is given a descriptive name. We can do that with the title argument of the plot() function, which allows for specifying a plot’s name (Pine Script Language Tutorial, n.d.). That name will then be displayed in the ‘Style’ window.

As it turns out, plot() isn’t the only function that can use title to set a custom plot name. Each of the following functions can use the optional title argument (Pine Script Language Tutorial, n.d.; TradingView, n.d.):

Function Description
barcolor() Sets the colour of price bars.
bgcolor() Fills the chart’s background with a colour.
fill() Fills the background section between two plots or horizontal lines.
hline() Draws a horizontal line at a specified price level.
plot() Plots a series of data on the chart.
plotarrow() Plots up and down arrows on the chart.
plotbar() Plots OHLC bars on the chart.
plotcandle() Plots price candles on the chart.
plotchar() Plots Unicode characters as visual shapes on the chart.
plotshape() Plots visual shapes on the chart (like arrows, crosses, and flags).
Tip: Always give the title argument a descriptive, unique name so that it’s easier to distinguish between the different visual outputs of a script.

Example: creating plot names in TradingView

Going back to our script example we can give each plot a descriptive name with title like this:

study(title="Example of multiple moving averages", 
     shorttitle="MAs example", overlay=true)

ma1 = ema(close, 10)
ma2 = sma(high, 20)
ma3 = ema(close, 30)
ma4 = sma(close, 40)
ma5 = ema(low, 50)
ma6 = sma(high, 60)
ma7 = ema(close, 70)
ma8 = sma(low, 80)
ma9 = sma(close, 90)

plot(series=ma1, color=red, title="EMA 1")
plot(series=ma2, color=fuchsia, title="SMA 1")
plot(series=ma3, color=blue, title="EMA 2")
plot(series=ma4, color=orange, title="SMA 2")
plot(series=ma5, color=black, title="EMA 3")
plot(series=ma6, color=teal, title="SMA 3")
plot(series=ma7, color=maroon, title="EMA 4")
plot(series=ma8, color=navy, title="SMA 4")
plot(series=ma9, color=lime, title="SMA 5")

This code example is nearly identical to the previous, but with the exception that each plot() function now has a title argument. With these plot names (like EMA 1 and SMA 4) we can easily make a distinction between the different plots in the script’s ‘Style’ window:

Example of named plots in TradingView

The value that we set the title argument to also affects the name that’s used in the ‘Data Window’. That helps to identify to colour and value of a certain plot, and looks like:

Example of named plots in TradingView's 'Data Window'

As an example, let’s change the script’s colours to blue, red, or green. The settings in the ‘Style’ window then look like:

The 'Style' window of a custom TradingView script

After clicking ‘OK’, the indicator looks like this on the chart:

Changing the colours of the moving average indicator

Prevent editing a TradingView script’s colours manually

Besides changing the script’s colours by hand, we can also prevent a user from changing the script’s colours manually. Each of the TradingView functions that have a title argument (see previous table) also have an editable argument that, when set to false, prohibits changing the colour and other settings in the ‘Style’ window (TradingView, n.d.).

Since that argument defaults to true, we can change the style settings unless we specifically set editable to false. To see the effect of editable, let’s set it to false for each of the plot() statements in our example:

study(title="Example of multiple moving averages", 
     shorttitle="MAs example", overlay=true)

ma1 = ema(close, 10)
ma2 = sma(high, 20)
ma3 = ema(close, 30)
ma4 = sma(close, 40)
ma5 = ema(low, 50)
ma6 = sma(high, 60)
ma7 = ema(close, 70)
ma8 = sma(low, 80)
ma9 = sma(close, 90)

plot(series=ma1, color=red, title="EMA 1", editable=false)
plot(series=ma2, color=fuchsia, title="SMA 1", editable=false)
plot(series=ma3, color=blue, title="EMA 2", editable=false)
plot(series=ma4, color=orange, title="SMA 2", editable=false)
plot(series=ma5, color=black, title="EMA 3", editable=false)
plot(series=ma6, color=teal, title="SMA 3", editable=false)
plot(series=ma7, color=maroon, title="EMA 4", editable=false)
plot(series=ma8, color=navy, title="SMA 4", editable=false)
plot(series=ma9, color=lime, title="SMA 5", editable=false)

The only difference made here is the addition of the editable=false code piece in every plot() statement. After saving the script, the ‘Style’ window looks like this now:

Example of the 'Style' window in TradingView with editable disabled

Here we see that none of the plots can be configured manually anymore. Of course, the moving averages still appear on the chart:

Example of plotting several moving averages in TradingView

And the name of each average still appears in the ‘Data Window’ – editable only removes the plots from the ‘Style’ window:

Example of the plot names in the TradingView 'Data Window'

Besides changing a script’s colours by hand, we can also alter them programmatically by changing colours in TradingView conditionally. We discuss applications of colours in colouring price bars and changing the colour of the chart’s background area.

Summary

Changing a script’s colours by hand is done in the ‘Style’ tab of the script settings. That window is opened by right-clicking on a plot and choosing ‘Format’, clicking on the gear wheel icon, or double-clicking on a plot. With the title argument, which can be used by several functions, we specify the name of plots or drawings. Choosing an unique and descriptive name makes changing the colours used by a custom script easier.


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