Tradingview Multi Chart Widget

For those of you who are into Crypto/Forex/Stocks, It’s really easy to place a custom tile with a list of your prefered tickers using a single tile with a menu inside to cycle between them, you can configure your options in tradingview (Symbol Overview Widget — Free and Powerful Tool — TradingView) and then place it inside the HTML custom tile ( remember to place the code from TD inside a DIV container ):

For better looks, configure in TD the background as transparent and them edit the style background in the tile itself.

If you wish to take a look, here is the code from the above example:

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.1.0",
  "settings": [],
  "name": "Crypto",
  "dimensions": {"height": 3, "width": 3},
  "label": {"display": false}
}
</script>
<!-- Do not edit above -->
<div class="TD_DIV">
  <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-overview.js" async="">
 {
  "symbols": [
    [
      "BINANCE:BTCUSDT|1D"
    ],
    [
      "BINANCE:BTCEUR|1D"
    ],
    [
      "BINANCE:ETHUSDT|1D"
    ],
    [
      "CAPITALCOM:DXY|1D"
    ],
    [
      "BINANCE:EURBUSD|1D"
    ]
  ],
  "chartOnly": false,
  "width": "1000",
  "height": "500",
  "locale": "en",
  "colorTheme": "dark",
  "autosize": false,
  "showVolume": false,
  "showMA": true,
  "hideDateRanges": false,
  "hideMarketStatus": false,
  "hideSymbolLogo": false,
  "scalePosition": "no",
  "scaleMode": "Normal",
  "fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
  "fontSize": "18",
  "noTimeScale": false,
  "valuesTracking": "1",
  "changeMode": "price-and-percent",
  "chartType": "bars",
  "maLineColor": "rgba(209, 212, 220, 1)",
  "maLineWidth": 1,
  "maLength": 50,
  "fontColor": "rgba(255, 255, 255, 1)",
  "backgroundColor": "rgba(19, 23, 34, 0)",
  "lineType": 0,
  "upColor": "#22ab94",
  "downColor": "#f7525f"
}
  </script>
</div>
<!-- TradingView Widget END -->
</div>
2 Likes

@Bruno_Cerqueira

Nice idea, i would like a Bitcoin chart,
unfortunatly i get the microsoft chart when I use your code, any ideas ?

Kind regards, Dj.