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/" 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": [
[
"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/" 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": [
[
"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/" 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": [
[
"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/" rel="noopener nofollow" target="_blank"><span className="blue-text">Track all markets on TradingView</span></a></div>
</div>
);
}
export default memo(TradingViewWidget);