NextJS Script TradingView widget configuration

user_676883 0
Viewed 369

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>
</>
tradingview-api next.js reactjs widget javascript
1 Answers

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>
    </>
}
user_2020
Related