Vertical chart
The Symbol Overview widget ships with multiple customization options. You can adjust size, colors, fonts, date and time formats, the price scale position, and more. As an example, consider the demo below. It shows a concise yet informative vertical chart providing insights into three securities: AAPL, AMD, and MSFT.
The chart legend is hidden with the chartOnly property set to true, however, you can still access detailed information on the price movement via the floating tooltip. The tooltip appears as you hover over the series on the chart.
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/symbols/NASDAQ-AAPL/?utm_source=www.tradingview.com&utm_medium=widget_new&utm_campaign=symbol-overview" rel="noopener nofollow" target="_blank"><span class="blue-text">Apple</span></a><span class="comma">, </span><a href="https://www.tradingview.com/symbols/NASDAQ-AMD/?utm_source=www.tradingview.com&utm_medium=widget_new&utm_campaign=symbol-overview" rel="noopener nofollow" target="_blank"><span class="blue-text">AMD</span></a><span class="and"> and </span><a href="https://www.tradingview.com/symbols/NASDAQ-MSFT/?utm_source=www.tradingview.com&utm_medium=widget_new&utm_campaign=symbol-overview" rel="noopener nofollow" target="_blank"><span class="blue-text">Microsoft stock price</span></a><span class="trademark"> by TradingView</span></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-overview.js" async>
{
"symbols": [
[
"Apple",
"AAPL|1D"
],
[
"NASDAQ:AMD|1D"
],
[
"NASDAQ:MSFT|1D"
]
],
"chartOnly": true,
"width": "300",
"height": "500",
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": false,
"hideSymbolLogo": false,
"scalePosition": "left",
"scaleMode": "Normal",
"fontFamily": "Andale Mono, monospace",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-and-percent",
"chartType": "area",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineWidth": 2,
"lineType": 0,
"dateRanges": [
"1d|5"
],
"lineColor": "rgba(41, 98, 255, 1)",
"topColor": "rgba(41, 98, 255, 0.24)",
"bottomColor": "rgba(209, 212, 220, 0.13)",
"dateFormat": "MM/dd/yy",
"timeHoursFormat": "12-hours"
}
</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/symbols/NASDAQ-AAPL/?utm_source=www.tradingview.com&utm_medium=widget_new&utm_campaign=symbol-overview" rel="noopener nofollow" target="_blank"><span class="blue-text">Apple</span></a><span class="comma">, </span><a href="https://www.tradingview.com/symbols/NASDAQ-AMD/?utm_source=www.tradingview.com&utm_medium=widget_new&utm_campaign=symbol-overview" rel="noopener nofollow" target="_blank"><span class="blue-text">AMD</span></a><span class="and"> and </span><a href="https://www.tradingview.com/symbols/NASDAQ-MSFT/?utm_source=www.tradingview.com&utm_medium=widget_new&utm_campaign=symbol-overview" rel="noopener nofollow" target="_blank"><span class="blue-text">Microsoft stock price</span></a><span class="trademark"> by TradingView</span></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-overview.js" async>
{
"symbols": [
[
"Apple",
"AAPL|1D"
],
[
"NASDAQ:AMD|1D"
],
[
"NASDAQ:MSFT|1D"
]
],
"chartOnly": true,
"width": "300",
"height": "500",
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": false,
"hideSymbolLogo": false,
"scalePosition": "left",
"scaleMode": "Normal",
"fontFamily": "Andale Mono, monospace",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-and-percent",
"chartType": "area",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineWidth": 2,
"lineType": 0,
"dateRanges": [
"1d|5"
],
"lineColor": "rgba(41, 98, 255, 1)",
"topColor": "rgba(41, 98, 255, 0.24)",
"bottomColor": "rgba(209, 212, 220, 0.13)",
"dateFormat": "MM/dd/yy",
"timeHoursFormat": "12-hours"
}
</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": [
[
"Apple",
"AAPL|1D"
],
[
"NASDAQ:AMD|1D"
],
[
"NASDAQ:MSFT|1D"
]
],
"chartOnly": true,
"width": "300",
"height": "500",
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": false,
"hideSymbolLogo": false,
"scalePosition": "left",
"scaleMode": "Normal",
"fontFamily": "Andale Mono, monospace",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-and-percent",
"chartType": "area",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineWidth": 2,
"lineType": 0,
"dateRanges": [
"1d|5"
],
"lineColor": "rgba(41, 98, 255, 1)",
"topColor": "rgba(41, 98, 255, 0.24)",
"bottomColor": "rgba(209, 212, 220, 0.13)",
"dateFormat": "MM/dd/yy",
"timeHoursFormat": "12-hours"
} `;
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/symbols/NASDAQ-AAPL/" rel="noopener nofollow" target="_blank"><span className="blue-text">Apple</span></a><span className="comma">, </span><a href="https://www.tradingview.com/symbols/NASDAQ-AMD/" rel="noopener nofollow" target="_blank"><span className="blue-text">AMD</span></a><span className="and"> and </span><a href="https://www.tradingview.com/symbols/NASDAQ-MSFT/" rel="noopener nofollow" target="_blank"><span className="blue-text">Microsoft stock price</span></a><span className="trademark"> by TradingView</span></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": [
[
"Apple",
"AAPL|1D"
],
[
"NASDAQ:AMD|1D"
],
[
"NASDAQ:MSFT|1D"
]
],
"chartOnly": true,
"width": "300",
"height": "500",
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": false,
"hideSymbolLogo": false,
"scalePosition": "left",
"scaleMode": "Normal",
"fontFamily": "Andale Mono, monospace",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-and-percent",
"chartType": "area",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineWidth": 2,
"lineType": 0,
"dateRanges": [
"1d|5"
],
"lineColor": "rgba(41, 98, 255, 1)",
"topColor": "rgba(41, 98, 255, 0.24)",
"bottomColor": "rgba(209, 212, 220, 0.13)",
"dateFormat": "MM/dd/yy",
"timeHoursFormat": "12-hours"
} `;
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/symbols/NASDAQ-AAPL/" rel="noopener nofollow" target="_blank"><span className="blue-text">Apple</span></a><span className="comma">, </span><a href="https://www.tradingview.com/symbols/NASDAQ-AMD/" rel="noopener nofollow" target="_blank"><span className="blue-text">AMD</span></a><span className="and"> and </span><a href="https://www.tradingview.com/symbols/NASDAQ-MSFT/" rel="noopener nofollow" target="_blank"><span className="blue-text">Microsoft stock price</span></a><span className="trademark"> by TradingView</span></div>
</div>
);
}
export default memo(TradingViewWidget);