/ Widgets / Charts / Advanced Chart / Demos / Watchlist

Watchlist

You can add a watchlist, which is linked to the chart. When you click on a symbol in the watchlist, it will change on the chart. You can add a predefined list, or change it dynamically, depending on what you want to show your users.

Embed code

HTML

React

<!-- 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": "watchlist-chart-demo",
	  "width": "100%",
	  "height": "100%",
	  "autosize": true,
	  "symbol": "NASDAQ:AAPL",
	  "interval": "D",
	  "timezone": "exchange",
	  "theme": "light",
	  "style": "1",
	  "withdateranges": true,
	  "allow_symbol_change": true,
	  "save_image": false,
	  "watchlist": [
		"AAPL",
		"IBM",
		"TSLA",
		"AMD",
		"MSFT",
		"GOOG"
	  ]
	}
	  </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": "watchlist-chart-demo",
	  "width": "100%",
	  "height": "100%",
	  "autosize": true,
	  "symbol": "NASDAQ:AAPL",
	  "interval": "D",
	  "timezone": "exchange",
	  "theme": "light",
	  "style": "1",
	  "withdateranges": true,
	  "allow_symbol_change": true,
	  "save_image": false,
	  "watchlist": [
		"AAPL",
		"IBM",
		"TSLA",
		"AMD",
		"MSFT",
		"GOOG"
	  ]
	}
	  </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,
			  "width": "100%",
			  "height": "100%",
			  "symbol": "NASDAQ:AAPL",
			  "interval": "D",
			  "timezone": "exchange",
			  "theme": "light",
			  "style": "1",
			  "withdateranges": true,
			  "allow_symbol_change": true,
			  "save_image": false,
			  "watchlist": [
				"AAPL",
				"IBM",
				"TSLA",
				"AMD",
				"MSFT",
				"GOOG"
			  ],
			  "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,
			  "width": "100%",
			  "height": "100%",
			  "symbol": "NASDAQ:AAPL",
			  "interval": "D",
			  "timezone": "exchange",
			  "theme": "light",
			  "style": "1",
			  "withdateranges": true,
			  "allow_symbol_change": true,
			  "save_image": false,
			  "watchlist": [
				"AAPL",
				"IBM",
				"TSLA",
				"AMD",
				"MSFT",
				"GOOG"
			  ],
			  "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);