How to change the colors on the TradingView Advanced Real-Time Chart Widget indicators

user_1518555 0
Viewed 1667

I'm trying to override the default configuration on the Advanced Real-Time Chart TradingView Widget.

I added a simple moving average on which I managed to set the period (from default 9 to 200).

I would like to change the color, but I didn't find any documentation on how to achieve that?

Question 1 : Is there any documentation on how to customize the widget?
Question 2 : Is it possible / how to change the indicators colors?

Here is a snippet of what I'm trying to achieve:

    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
        <div id="tradingview_f7f00"></div>
        <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
        <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
        <script type="text/javascript">
            new TradingView.widget(
                {
                    "width": 980,
                    "height": 610,
                    "symbol": "NASDAQ:AAPL",
                    "interval": "D",
                    "timezone": "Etc/UTC",
                    "theme": "light",
                    "style": "1",
                    "locale": "en",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "allow_symbol_change": true,
                    // ==================== BEGIN ====================
                    "studies": [
                        {
                            id: "MASimple@tv-basicstudies",
                            // This sets the period
                            inputs: {
                                length: 200,
                            },
                            // This doesn't work...
                            styles: {
                                color: '#ff0000',
                            }
                        },
                    ],
                    // ====================  END  ====================
                    "container_id": "tradingview_f7f00"
                }
            );
        </script>
    </div>
    <!-- TradingView Widget END -->

tradingview-api trading
2 Answers

You need to pass an overrider object to the widget constructor just like you are passing other parameters such as width, or height:

new TradingView.widget({
    overrides: {
        'paneProperties.background': '#2E2E2E',
    }
});

This one would change the background, for example. To know more about overrides just consult the wiki page of the library, on the overrides section :)

user_94434040

Refer: Tradingview Simple Moving Average widget configure

Try like this,

You should use the names of the studies in the Insert Study dialog as they are but using lower case letters.

  "studies_overrides": {
        "moving average.ma.color": "#2A2E39",
        "moving average.ma.linewidth": 2,
    },

enter image description here

user_33430070
Related