Analytics platform

You can add more panels, such as the top losers and gainers hotlists, details for each symbol, and the economic calendar - turning a simple chart into a full-blown analytics platform.

Embed code

HTMLReact
<!-- TradingView Widget BEGIN -->
	<div class="tradingview-widget-container" style="height:100%;width:100%">
	  <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
	  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
	  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
	  {
	  "container_id": "analytics-platform-chart-demo",
	  "width": "100%",
	  "height": "100%",
	  "autosize": true,
	  "symbol": "NASDAQ:AAPL",
	  "interval": "D",
	  "timezone": "exchange",
	  "theme": "light",
	  "style": "0",
	  "withdateranges": true,
	  "allow_symbol_change": true,
	  "save_image": false,
	  "details": true,
	  "hotlist": true,
	  "calendar": false
	}
	  </script>
	</div>
	<!-- TradingView Widget END -->
<!-- TradingView Widget BEGIN -->
	<div class="tradingview-widget-container" style="height:100%;width:100%">
	  <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
	  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
	  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
	  {
	  "container_id": "analytics-platform-chart-demo",
	  "width": "100%",
	  "height": "100%",
	  "autosize": true,
	  "symbol": "NASDAQ:AAPL",
	  "interval": "D",
	  "timezone": "exchange",
	  "theme": "light",
	  "style": "0",
	  "withdateranges": true,
	  "allow_symbol_change": true,
	  "save_image": false,
	  "details": true,
	  "hotlist": true,
	  "calendar": false
	}
	  </script>
	</div>
	<!-- TradingView Widget END -->
// TradingViewWidget.jsx
	import React, { useEffect, useRef, memo } from 'react';

	function TradingViewWidget() {
	  const container = useRef();

	  useEffect(
		() => {
		  const script = document.createElement("script");
		  script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
		  script.type = "text/javascript";
		  script.async = true;
		  script.innerHTML = `
			{
			  "autosize": true,
			  "symbol": "NASDAQ:AAPL",
			  "interval": "D",
			  "timezone": "exchange",
			  "theme": "light",
			  "style": "0",
			  "locale": "en",
			  "allow_symbol_change": true,
			  "calendar": false,
			  "withdateranges": true,
			  "allow_symbol_change": true,
			  "save_image": false,
			  "details": true,
			  "hotlist": true,
			  "calendar": false,
			  "support_host": "https://www.tradingview.com"
			}`;
		  container.current.appendChild(script);
		},
		[]
	  );

	  return (
		<div className="tradingview-widget-container" ref={container} style={{ height: "100%", width: "100%" }}>
		  <div className="tradingview-widget-container__widget" style={{ height: "calc(100% - 32px)", width: "100%" }}></div>
		  <div className="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span className="blue-text">Track all markets on TradingView</span></a></div>
		</div>
	  );
	}

	export default memo(TradingViewWidget);
// TradingViewWidget.jsx
	import React, { useEffect, useRef, memo } from 'react';

	function TradingViewWidget() {
	  const container = useRef();

	  useEffect(
		() => {
		  const script = document.createElement("script");
		  script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
		  script.type = "text/javascript";
		  script.async = true;
		  script.innerHTML = `
			{
			  "autosize": true,
			  "symbol": "NASDAQ:AAPL",
			  "interval": "D",
			  "timezone": "exchange",
			  "theme": "light",
			  "style": "0",
			  "locale": "en",
			  "allow_symbol_change": true,
			  "calendar": false,
			  "withdateranges": true,
			  "allow_symbol_change": true,
			  "save_image": false,
			  "details": true,
			  "hotlist": true,
			  "calendar": false,
			  "support_host": "https://www.tradingview.com"
			}`;
		  container.current.appendChild(script);
		},
		[]
	  );

	  return (
		<div className="tradingview-widget-container" ref={container} style={{ height: "100%", width: "100%" }}>
		  <div className="tradingview-widget-container__widget" style={{ height: "calc(100% - 32px)", width: "100%" }}></div>
		  <div className="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span className="blue-text">Track all markets on TradingView</span></a></div>
		</div>
	  );
	}

	export default memo(TradingViewWidget);