YTD index performances
Year To Date performance for the SPX500 index’s largest symbols (by market cap), without any grouping.
Embed code
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></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-stock-heatmap.js" async>
{
"exchanges": [],
"dataSource": "SPX500",
"grouping": "no_group",
"blockSize": "market_cap_basic",
"blockColor": "Perf.YTD",
"locale": "en",
"symbolUrl": "",
"colorTheme": "light",
"hasTopBar": false,
"isDataSetEnabled": false,
"isZoomEnabled": true,
"hasSymbolTooltip": true,
"width": "100%",
"height": "100%"
}
</script>
</div>
<!-- TradingView Widget END -->
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></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-stock-heatmap.js" async>
{
"exchanges": [],
"dataSource": "SPX500",
"grouping": "no_group",
"blockSize": "market_cap_basic",
"blockColor": "Perf.YTD",
"locale": "en",
"symbolUrl": "",
"colorTheme": "light",
"hasTopBar": false,
"isDataSetEnabled": false,
"isZoomEnabled": true,
"hasSymbolTooltip": true,
"width": "100%",
"height": "100%"
}
</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-stock-heatmap.js";
script.type = "text/javascript";
script.async = true;
script.innerHTML = `
{
"exchanges": [],
"dataSource": "SPX500",
"grouping": "no_group",
"blockSize": "market_cap_basic",
"blockColor": "Perf.YTD",
"locale": "en",
"symbolUrl": "",
"colorTheme": "light",
"hasTopBar": false,
"isDataSetEnabled": false,
"isZoomEnabled": true,
"hasSymbolTooltip": true,
"width": "100%",
"height": "100%"
}`;
container.current.appendChild(script);
},
[]
);
return (
<div className="tradingview-widget-container" ref={container}>
<div className="tradingview-widget-container__widget"></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-stock-heatmap.js";
script.type = "text/javascript";
script.async = true;
script.innerHTML = `
{
"exchanges": [],
"dataSource": "SPX500",
"grouping": "no_group",
"blockSize": "market_cap_basic",
"blockColor": "Perf.YTD",
"locale": "en",
"symbolUrl": "",
"colorTheme": "light",
"hasTopBar": false,
"isDataSetEnabled": false,
"isZoomEnabled": true,
"hasSymbolTooltip": true,
"width": "100%",
"height": "100%"
}`;
container.current.appendChild(script);
},
[]
);
return (
<div className="tradingview-widget-container" ref={container}>
<div className="tradingview-widget-container__widget"></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);