Technical analysis
If you want to please advanced chartists, give them all available drawings - there are over 100 of them! You can also add indicators that will appear by default on the widget. Of course, you can also let your chartists use the 80+ indicators that are included. Possibilities are limitless - you can add things like a second price scale on the left, and change it between a Percentage and Log scales. You can also compare several symbols by overlaying them, or onto different subscharts one over another.
Embed code
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container" style="height:100%;width:100%">
<div id="technical-analysis-chart-demo" style="height:calc(100% - 32px);width:100%"></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/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"container_id": "technical-analysis-chart-demo",
"width": "100%",
"height": "100%",
"autosize": true,
"symbol": "AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "light",
"style": "1",
"withdateranges": true,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"studies": [
"ROC@tv-basicstudies",
"StochasticRSI@tv-basicstudies",
"MASimple@tv-basicstudies"
],
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"support_host": "https://www.tradingview.com",
"locale": "en"
}
);
</script>
</div>
<!-- TradingView Widget END --><!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container" style="height:100%;width:100%">
<div id="technical-analysis-chart-demo" style="height:calc(100% - 32px);width:100%"></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/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"container_id": "technical-analysis-chart-demo",
"width": "100%",
"height": "100%",
"autosize": true,
"symbol": "AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "light",
"style": "1",
"withdateranges": true,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"studies": [
"ROC@tv-basicstudies",
"StochasticRSI@tv-basicstudies",
"MASimple@tv-basicstudies"
],
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"support_host": "https://www.tradingview.com",
"locale": "en"
}
);
</script>
</div>
<!-- TradingView Widget END -->// TradingViewWidget.jsx
import React, { useEffect, useRef } from 'react';
let tvScriptLoadingPromise;
export default function TradingViewWidget() {
const onLoadScriptRef = useRef();
useEffect(
() => {
onLoadScriptRef.current = createWidget;
if (!tvScriptLoadingPromise) {
tvScriptLoadingPromise = new Promise((resolve) => {
const script = document.createElement('script');
script.id = 'tradingview-widget-loading-script';
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js';
script.type = 'text/javascript';
script.onload = resolve;
document.head.appendChild(script);
});
}
tvScriptLoadingPromise.then(() => onLoadScriptRef.current && onLoadScriptRef.current());
return () => onLoadScriptRef.current = null;
function createWidget() {
if (document.getElementById('technical-analysis-chart-demo') && 'TradingView' in window) {
new window.TradingView.widget({
container_id: "technical-analysis-chart-demo",
width: "100%",
height: "100%",
autosize: true,
symbol: "AAPL",
interval: "D",
timezone: "exchange",
theme: "light",
style: "1",
withdateranges: true,
hide_side_toolbar: false,
allow_symbol_change: true,
save_image: false,
studies: ["ROC@tv-basicstudies","StochasticRSI@tv-basicstudies","MASimple@tv-basicstudies"],
show_popup_button: true,
popup_width: "1000",
popup_height: "650",
support_host: "https://www.tradingview.com",
locale: "en"
});
}
}
},
[]
);
return (
<div className='tradingview-widget-container' style={{ height: "100%", width: "100%" }}>
<div id='technical-analysis-chart-demo' style={{ height: "calc(100% - 32px)", width: "100%" }} />
<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>
);
}
// TradingViewWidget.jsx
import React, { useEffect, useRef } from 'react';
let tvScriptLoadingPromise;
export default function TradingViewWidget() {
const onLoadScriptRef = useRef();
useEffect(
() => {
onLoadScriptRef.current = createWidget;
if (!tvScriptLoadingPromise) {
tvScriptLoadingPromise = new Promise((resolve) => {
const script = document.createElement('script');
script.id = 'tradingview-widget-loading-script';
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js';
script.type = 'text/javascript';
script.onload = resolve;
document.head.appendChild(script);
});
}
tvScriptLoadingPromise.then(() => onLoadScriptRef.current && onLoadScriptRef.current());
return () => onLoadScriptRef.current = null;
function createWidget() {
if (document.getElementById('technical-analysis-chart-demo') && 'TradingView' in window) {
new window.TradingView.widget({
container_id: "technical-analysis-chart-demo",
width: "100%",
height: "100%",
autosize: true,
symbol: "AAPL",
interval: "D",
timezone: "exchange",
theme: "light",
style: "1",
withdateranges: true,
hide_side_toolbar: false,
allow_symbol_change: true,
save_image: false,
studies: ["ROC@tv-basicstudies","StochasticRSI@tv-basicstudies","MASimple@tv-basicstudies"],
show_popup_button: true,
popup_width: "1000",
popup_height: "650",
support_host: "https://www.tradingview.com",
locale: "en"
});
}
}
},
[]
);
return (
<div className='tradingview-widget-container' style={{ height: "100%", width: "100%" }}>
<div id='technical-analysis-chart-demo' style={{ height: "calc(100% - 32px)", width: "100%" }} />
<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>
);
}