Manage layout and size

When you embed TradingView widgets into your website, it’s important to understand how their sizing works to ensure they display correctly.

The widget always tries to fill the space allowed by CSS. The recommended approach is automatic sizing, where you style the container element with flexible CSS and the widget adapts to it. If needed, you can use fixed sizing by assigning a specific, unchanging width and height to the container.

Automatic sizing (recommended)

This is the default and most flexible approach. Letting the widget automatically adapt to its container makes your layout naturally responsive. It also keeps your code clean by separating styling logic into your CSS, not in widget attributes. You manage the container’s size, and the widget follows.

1. Place the widget’s script inside a container element (e.g., <div>).
2. Use CSS to define the container’s size. You can use responsive units, flexbox properties, or grid properties.

The example below shows the Mini Chart widget in a responsive container.

<div class="widget-wrap">
  <tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>
</div>

<style>
  .widget-wrap {
    width: 100%;
    height: 100%;
  }
</style>

Fixed sizing

In this approach, you apply the fixed dimensions to the widget’s container. Use this approach when you need a widget to occupy a precise, unchanging area on your page.

1. Place the widget inside a container element.
2. Use CSS to set an explicit width and height on the container.

The example below shows the Mini Chart widget with explicit dimensions.

<div class="widget-fixed">
  <tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>
</div>

<style>
  .widget-fixed {
    display: block;
    width: 250px;
    height: 200px;
    overflow: hidden;
    /* Optional: make it responsive within a cap */
    max-width: 100%;
  }
</style>

Layout tips and warnings

• If the container scrolls, ensure it has enough height. Otherwise, it may collapse and hide the widget.
• Be aware that overflow: hidden will clip pop-ups. If a widget uses interactive elements like menus or dialogs, applying this style to its container can make those features unusable.

Multiple widgets examples

Using flexbox

<div class="flex-row">
  <tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>
  <tv-mini-chart symbol="NASDAQ:NVDA"></tv-mini-chart>
</div>

<style>
  .flex-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    block-size: 100%; /* Make the flex row stretch to full height */
  }
</style>

Using CSS grid

<div class="grid">
  <tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>
  <tv-mini-chart symbol="NASDAQ:TSLA"></tv-mini-chart>
  <tv-mini-chart class="wide" symbol="NASDAQ:NVDA"></tv-mini-chart>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
    block-size: 100%; /* Make the grid stretch to full height */
  }
  .wide {
    grid-column: span 2;
  }
</style>