Indices overview
The Symbol Overview widget supports various trading data including stocks, futures, Forex, Crypto, and more. This demo provides detailed information on three major US indices: S&P 500, Nasdaq 100, and Dow Jones Industrial Average (DJIA). Investors use these indices as benchmarks both for the health of the US stock market and the performance of their own portfolios. The widget supports multiple time periods allowing you to analyze changes in indices over time.
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-symbol-overview.js" async>
{
"symbols": [
[
"FRED:SP500|1D"
],
[
"FRED:NDQ100|1D"
],
[
"BLACKBULL:US30|1D"
]
],
"chartOnly": false,
"width": "100%",
"height": "100%",
"locale": "en",
"colorTheme": "light",
"autosize": true,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": true,
"hideSymbolLogo": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-and-percent",
"chartType": "area",
"lineWidth": 2,
"lineType": 0,
"dateRanges": [
"1d|1",
"1m|1D",
"3m|60",
"12m|1D",
"60m|1W",
"all|1M"
]
}
</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-symbol-overview.js" async>
{
"symbols": [
[
"FRED:SP500|1D"
],
[
"FRED:NDQ100|1D"
],
[
"BLACKBULL:US30|1D"
]
],
"chartOnly": false,
"width": "100%",
"height": "100%",
"locale": "en",
"colorTheme": "light",
"autosize": true,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": true,
"hideSymbolLogo": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-and-percent",
"chartType": "area",
"lineWidth": 2,
"lineType": 0,
"dateRanges": [
"1d|1",
"1m|1D",
"3m|60",
"12m|1D",
"60m|1W",
"all|1M"
]
}
</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-symbol-overview.js";
script.type = "text/javascript";
script.async = true;
script.innerHTML = `
{
"symbols": [
[
"FRED:SP500|1D"
],
[
"FRED:NDQ100|1D"
],
[
"BLACKBULL:US30|1D"
]
],
"chartOnly": false,
"width": 550,
"height": 400,
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": true,
"hideSymbolLogo": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-and-percent",
"chartType": "area",
"lineWidth": 2,
"lineType": 0,
"dateRanges": [
"1d|1",
"1m|1D",
"3m|60",
"12m|1D",
"60m|1W",
"all|1M"
]
} `;
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-symbol-overview.js";
script.type = "text/javascript";
script.async = true;
script.innerHTML = `
{
"symbols": [
[
"FRED:SP500|1D"
],
[
"FRED:NDQ100|1D"
],
[
"BLACKBULL:US30|1D"
]
],
"chartOnly": false,
"width": 550,
"height": 400,
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": true,
"hideSymbolLogo": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-and-percent",
"chartType": "area",
"lineWidth": 2,
"lineType": 0,
"dateRanges": [
"1d|1",
"1m|1D",
"3m|60",
"12m|1D",
"60m|1W",
"all|1M"
]
} `;
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);