Comparison chart
The Symbol Overview widget ships with multiple features and customization options. This demo shows the Compare tool designed to compare the market movements of two symbols simultaneously. With this tool, you can visualize health of the entire market or a certain sector.
For example, the chart below demonstrates a comparison between two companies, Apple Inc. and NVIDIA Corporation, that operate in the electronic technology sector. The percentage scale allows you to measure the price movement for currently selected period on the chart: a week, a month, three months, or a year. Besides, you can access the detailed price information with 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"
]
],
"chartOnly": true,
"width": "100%",
"height": "100%",
"locale": "en",
"colorTheme": "light",
"autosize": true,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": true,
"hideSymbolLogo": true,
"scalePosition": "right",
"scaleMode": "Percentage",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-only",
"chartType": "line",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineWidth": 2,
"lineType": 0,
"compareSymbol": {
"symbol": "NASDAQ:NVDA",
"lineColor": "rgba(41, 98, 255, 1)",
"lineWidth": 2
},
"dateRanges": [
"1w|15",
"1m|60",
"3m|60",
"12m|1D"
],
"bottomColor": "rgba(255, 255, 255, 0)",
"dateFormat": "MMM dd, yyyy",
"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"
]
],
"chartOnly": true,
"width": "100%",
"height": "100%",
"locale": "en",
"colorTheme": "light",
"autosize": true,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": true,
"hideSymbolLogo": true,
"scalePosition": "right",
"scaleMode": "Percentage",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-only",
"chartType": "line",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineWidth": 2,
"lineType": 0,
"compareSymbol": {
"symbol": "NASDAQ:NVDA",
"lineColor": "rgba(41, 98, 255, 1)",
"lineWidth": 2
},
"dateRanges": [
"1w|15",
"1m|60",
"3m|60",
"12m|1D"
],
"bottomColor": "rgba(255, 255, 255, 0)",
"dateFormat": "MMM dd, yyyy",
"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"
]
],
"chartOnly": true,
"width": 550,
"height": 400,
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": true,
"hideSymbolLogo": true,
"scalePosition": "right",
"scaleMode": "Percentage",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-only",
"chartType": "line",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineWidth": 2,
"lineType": 0,
"compareSymbol": {
"symbol": "NASDAQ:NVDA",
"lineColor": "rgba(41, 98, 255, 1)",
"lineWidth": 2
},
"dateRanges": [
"1w|15",
"1m|60",
"3m|60",
"12m|1D"
],
"bottomColor": "rgba(255, 255, 255, 0)",
"dateFormat": "MMM dd, yyyy",
"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"
]
],
"chartOnly": true,
"width": 550,
"height": 400,
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": false,
"showMA": false,
"hideDateRanges": false,
"hideMarketStatus": true,
"hideSymbolLogo": true,
"scalePosition": "right",
"scaleMode": "Percentage",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "1",
"changeMode": "price-only",
"chartType": "line",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineWidth": 2,
"lineType": 0,
"compareSymbol": {
"symbol": "NASDAQ:NVDA",
"lineColor": "rgba(41, 98, 255, 1)",
"lineWidth": 2
},
"dateRanges": [
"1w|15",
"1m|60",
"3m|60",
"12m|1D"
],
"bottomColor": "rgba(255, 255, 255, 0)",
"dateFormat": "MMM dd, yyyy",
"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);