While transferring the best stock article on my website from Jekyll to NextJS I can't figure out how to pass widget configuration to the built-in Script component, it simply doesn't display the widget. Here is the code:
import Script from 'next/script'
export default function StockSnippet({Exchange, Ticker}) {
return <>
<Script src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js">
{{"symbol": `${Exchange}:${Ticker}`,
"width": "100%",
"height": "100%",
"locale": "en",
"dateRange": "12M",
"colorTheme": "light",
"trendLineColor": "rgba(41, 98, 255, 1)",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": true,
"largeChartUrl": ""}}
</Script>
</>
Try turning your data into a JSON string by calling JSON.stringify
export default function StockSnippet({ Exchange, Ticker }) {
const wrapperStyle = {
width: "100%",
height: "100%"
}
return <>
<div id="tradingview-wrapper" style={wrapperStyle}>
<Script
id="tradingview-widget"
src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js"
onLoad={() => {
document.getElementById('tradingview-wrapper').appendChild(document.getElementById('tradingview-widget'));
}}>
{JSON.stringify({
"symbol": `${Ticker}:${Exchange}`,
"width": "100%",
"height": "100%",
"locale": "en",
"dateRange": "12M",
"colorTheme": "light",
"trendLineColor": "rgba(41, 98, 255, 1)",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": true,
"largeChartUrl": "",
})}
</Script>
</div>
</>
}