Technical analysis chart
The Symbol Overview widget ships with multiple technical analysis features. This demo shows the AAPL security with Moving Average, which helps identify trends and potential areas of support or resistance. Besides, the Volume indicator is added to the chart, providing you with additional information on the market activity and sentiment.
As you hover over the candles on the chart, OHLC (Open, High, Low, Close) values are displayed in the legend for your reference.
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|12M"
]
],
"chartOnly": false,
"width": "100%",
"height": "100%",
"locale": "en",
"colorTheme": "light",
"autosize": true,
"showVolume": true,
"showMA": true,
"hideDateRanges": false,
"hideMarketStatus": false,
"hideSymbolLogo": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "3",
"changeMode": "price-only",
"chartType": "candlesticks",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineType": 0,
"dateRanges": [
"1w|60",
"1m|1D",
"6m|120",
"12m|1D",
"60m|1W"
],
"downColor": "#f7525f",
"upColor": "#22ab94",
"borderUpColor": "#22ab94",
"borderDownColor": "#f7525f",
"wickUpColor": "#22ab94",
"wickDownColor": "#f7525f"
}
</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|12M"
]
],
"chartOnly": false,
"width": "100%",
"height": "100%",
"locale": "en",
"colorTheme": "light",
"autosize": true,
"showVolume": true,
"showMA": true,
"hideDateRanges": false,
"hideMarketStatus": false,
"hideSymbolLogo": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "3",
"changeMode": "price-only",
"chartType": "candlesticks",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineType": 0,
"dateRanges": [
"1w|60",
"1m|1D",
"6m|120",
"12m|1D",
"60m|1W"
],
"downColor": "#f7525f",
"upColor": "#22ab94",
"borderUpColor": "#22ab94",
"borderDownColor": "#f7525f",
"wickUpColor": "#22ab94",
"wickDownColor": "#f7525f"
}
</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|12M"
]
],
"chartOnly": false,
"width": "800",
"height": "600",
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": true,
"showMA": true,
"hideDateRanges": false,
"hideMarketStatus": false,
"hideSymbolLogo": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "3",
"changeMode": "price-only",
"chartType": "candlesticks",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineType": 0,
"dateRanges": [
"1w|60",
"1m|1D",
"6m|120",
"12m|1D",
"60m|1W"
],
"downColor": "#f7525f",
"upColor": "#22ab94",
"borderUpColor": "#22ab94",
"borderDownColor": "#f7525f",
"wickUpColor": "#22ab94",
"wickDownColor": "#f7525f"
},
[]
);
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|12M"
]
],
"chartOnly": false,
"width": "800",
"height": "600",
"locale": "en",
"colorTheme": "light",
"autosize": false,
"showVolume": true,
"showMA": true,
"hideDateRanges": false,
"hideMarketStatus": false,
"hideSymbolLogo": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"fontSize": "10",
"noTimeScale": false,
"valuesTracking": "3",
"changeMode": "price-only",
"chartType": "candlesticks",
"maLineColor": "#2962FF",
"maLineWidth": 1,
"maLength": 9,
"lineType": 0,
"dateRanges": [
"1w|60",
"1m|1D",
"6m|120",
"12m|1D",
"60m|1W"
],
"downColor": "#f7525f",
"upColor": "#22ab94",
"borderUpColor": "#22ab94",
"borderDownColor": "#f7525f",
"wickUpColor": "#22ab94",
"wickDownColor": "#f7525f"
},
[]
);
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);