Tradingview chart height issue

Question

I have a problem with the chart widget. It does not adjust to the height automatically.

How can I fix or make responsive it?

new TradingView.widget(
  {
    "autosize": true,
  "symbol": "BINANCE:BTCUSDTPERP",
  "interval": "5",
  "timezone": "America/Chicago",
  "theme": "dark",
  "style": "1",
  "locale": "es",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_side_toolbar": true,
  "hide_top_toolbar": true,
  "watchlist": [
    "BINANCE:BTCUSDTPERP",
    "BINANCE:ETHUSDTPERP",
    "BINANCE:1INCHUSDTPERP",
    "BINANCE:XLMUSDTPERP",
    "BINANCE:DOGEUSDTPERP",
    "BINANCE:XRPUSDTPERP",
    "BINANCE:ADAUSDTPERP"
  ],
  // "details": true,
  "container_id": "tradingview_447bd"
}
  );
  </script>

score 0 · Answer 1 · answered Jan 21 '22 at 09:40

0

<style>
      div {
          height: 100vh;
      }
</style>

answered Jan 21 '22 at 09:40

Incognito

11
1
1

score 0 · Answer 2 · answered Dec 22 '22 at 04:29

I know this isn't quite elegant... but I was having the same problem and fixed this way (I'm using Tailwind CSS)

<main ckass="w-full h-screen" id="main">
  <!-- Tradingview Widget -->

  <!-- ... -->

  <script type="text/javascript">
    let main = document.querySelector('#main')
    let width = main.offsetWidth
    let height = main.offsetHeight

    new TradingView.widget(
    {
      // "autosize": true,
      "width": width,
      "height": height,
      "symbol": "NASDAQ:AAPL",
      // ... etc.
    });
  </script>
  
</main>

So basically I calculated the width and height of the parent element and pass it to the widget ‍♂️

Now this thing isn't responsive...

Tradingview chart height issue

2 Answers2