The default length for the moving average on TradingView Advanced Real-Time Chart Widget is 9 days but I am trying to change it to 50.
I looked online and only found out how to change the moving average length for Advanced charts but I am using TradingView Advanced Real-Time Chart Widget.
<code> // TradingViewWidget.tsx
import { Box } from "@mui/material";
import React, { useEffect, useRef, memo } from "react";
const TechnicalAnalysis: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
const script = document.createElement("script");
script.src =
"https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
script.type = "text/javascript";
script.async = true;
script.innerHTML = `
{
"autosize": true,
"symbol": "CME:LBR1!",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"calendar": false,
"studies": [
"STD;SMA"
],
"support_host": "https://www.tradingview.com"
}`;
containerRef.current.appendChild(script);
}, []);
return (
<Box height="90vh" sx={{ border: "1px var(--black) solid" }}>
<Box className="tradingview-widget-container" ref={containerRef}>
<Box className="tradingview-widget-container__widget" />
</Box>
</Box>
);
};
export default memo(TechnicalAnalysis);
</code>
<code> // TradingViewWidget.tsx
import { Box } from "@mui/material";
import React, { useEffect, useRef, memo } from "react";
const TechnicalAnalysis: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
const script = document.createElement("script");
script.src =
"https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
script.type = "text/javascript";
script.async = true;
script.innerHTML = `
{
"autosize": true,
"symbol": "CME:LBR1!",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"calendar": false,
"studies": [
"STD;SMA"
],
"support_host": "https://www.tradingview.com"
}`;
containerRef.current.appendChild(script);
}, []);
return (
<Box height="90vh" sx={{ border: "1px var(--black) solid" }}>
<Box className="tradingview-widget-container" ref={containerRef}>
<Box className="tradingview-widget-container__widget" />
</Box>
</Box>
);
};
export default memo(TechnicalAnalysis);
</code>
// TradingViewWidget.tsx
import { Box } from "@mui/material";
import React, { useEffect, useRef, memo } from "react";
const TechnicalAnalysis: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
const script = document.createElement("script");
script.src =
"https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
script.type = "text/javascript";
script.async = true;
script.innerHTML = `
{
"autosize": true,
"symbol": "CME:LBR1!",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"calendar": false,
"studies": [
"STD;SMA"
],
"support_host": "https://www.tradingview.com"
}`;
containerRef.current.appendChild(script);
}, []);
return (
<Box height="90vh" sx={{ border: "1px var(--black) solid" }}>
<Box className="tradingview-widget-container" ref={containerRef}>
<Box className="tradingview-widget-container__widget" />
</Box>
</Box>
);
};
export default memo(TechnicalAnalysis);