Stock Details

=============== LIBRARY RULES =============== From library maintainers: - Widgets come in two formats: Web Component (recommended) and iframe. Recommend Web Component for new integrations; suggest iframe only for CMS/legacy environments that block custom tags or ES modules, or when strict isolation is required. - Pages with "legacy-" in the URL and the "type: iframe" label describe iframe widgets; the page without the prefix describes the Web Component version of the same widget. - Do not mix the two syntaxes. Web Component = an ES module script plus a custom element whose tag starts with tv- (for example tv-mini-chart), configured via HTML attributes. - Widgets show only TradingView data. You cannot connect your own data, there is no data API, and data can't be exported. For your own data, point to Advanced Charts or Lightweight Charts. - Symbols always use the EXCHANGE:TICKER format (e.g. NASDAQ:AAPL); otherwise the widget won't load. - Stock data in widgets is delayed; forex and crypto are real-time. A paid TradingView plan does not change widget data. Data levels per exchange are on the "Available markets" pages. - Pine scripts and strategies cannot be added to widgets. - Do not inject embed code via innerHTML or jQuery — the browser blocks script execution. For Web Components, use the dynamic import() + document.createElement pattern. - Web Components use closed shadow roots: style them only via the theme attribute, --tv-widget-* CSS tokens, and ::part selectors. Don't suggest styling internal elements directly. - A widget's size is set by its container: give the container an explicit height, otherwise the widget collapses. overflow: hidden on the container clips pop-ups. - Do not invent attribute or option names. If the needed option isn't in the docs, tell the user to get it from the configuration wizard on the widget's page. - Custom symbol links: Web Components use symbol-url; iframe widgets use the "full-size chart URL" setting. - Widgets must keep the TradingView attribution/copyright link; do not suggest removing it. - Iframe widget = a script loaded from s3.tradingview.com/external-embedding/ with a JSON config inside it. Do not use iframe JSON options as Web Component attributes or vice versa. ### Listen for tv-link-open across all widgets Source: https://www.tradingview.com/widget-docs/tutorials/web-components/custom-links/ Because the event bubbles, add a single listener on a common ancestor like document.body to handle links from every widget. This example builds a custom URL and opens it in a new tab. ```HTML

``` -------------------------------- ### Complete HTML for Stock Details Page with TradingView Widgets Source: https://www.tradingview.com/widget-docs/tutorials/iframe/build-page/getting-started/ This is the complete HTML document for a stock details page. It includes a header with a site logo and search input, a footer, and a main grid layout with placeholders for TradingView widgets. The CSS defines the layout, colors, and sizing for each widget container. Use this as a starting point for integrating TradingView widgets into a page. ```html Stock Details ``` -------------------------------- ### Web Component widget embed snippet Source: https://www.tradingview.com/widget-docs/widget-formats/ Shows the embed code for a Web Component widget, which uses an ES module import and a custom HTML tag starting with 'tv-'. The example uses a mini-chart widget with symbol 'NASDAQ:AAPL' and light theme. ```html ``` -------------------------------- ### Combine URL template with event handler for tv-mini-chart Source: https://www.tradingview.com/widget-docs/tutorials/web-components/custom-links/ Sets a default destination via symbol-url and intercepts the tv-link-open event to log the resolved href. The event.detail.href reflects the resolved template URL when both are present. Do not call preventDefault() to allow default navigation. ```HTML ``` ```JavaScript ``` -------------------------------- ### Widget options with changed symbol Source: https://www.tradingview.com/widget-docs/tutorials/iframe/build-page/dynamic-symbols/ Update the 'symbol' option in the widget configuration to change the displayed symbol. The example changes the symbol from NASDAQ:AAPL to NASDAQ:NVDA. Symbol names use the syntax {EXCHANGE}:{NAME}. ```JavaScript { /* ... the other options ...*/ "symbol": "NASDAQ:NVDA" /* ← changed from NASDAQ:AAPL */ } ``` -------------------------------- ### Automatic sizing with responsive container for Mini Chart widget Source: https://www.tradingview.com/widget-docs/tutorials/web-components/layout-and-sizing/ Place the widget in a container and use CSS to define its size with responsive units or flex/grid properties. The widget adapts to the container's size. ```html ``` -------------------------------- ### Iframe widget embed snippet Source: https://www.tradingview.com/widget-docs/widget-formats/ Shows the embed code for an iframe-based widget, which uses a standard script file that injects an