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
<!-- 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>
{
"autosize": true,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "light",
"backgroundColor": "rgba(255, 255, 255, 1)",
"style": "1",
"withdateranges": true,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"locale": "en",
"watchlist": [
"AAPL",
"IBM",
"TSLA",
"AMD",
"MSFT",
"GOOG"
],
"calendar": false,
"support_host": "https://www.tradingview.com"
}
</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>
{
"autosize": true,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "light",
"backgroundColor": "rgba(255, 255, 255, 1)",
"style": "1",
"withdateranges": true,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"locale": "en",
"watchlist": [
"AAPL",
"IBM",
"TSLA",
"AMD",
"MSFT",
"GOOG"
],
"calendar": false,
"support_host": "https://www.tradingview.com"
}
</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);