How to use TradingView widgets in a React component?

Question

This widget is slightly different from other examples on SO. Other examples have only one script tag with a url src but this widget has another script tag with a function.

This is what I copied from their website. Tradingview widgets

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_ca190"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "width": 980,
  "height": 610,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_ca190"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

similar question: https://stackoverflow.com/questions/53845011/how-to-to-insert-tradingview-widget-into-react-js-which-is-in-script-tag-link-h — hm6, Dec 17 '21 at 00:20

score 0 · Answer 1 · answered Dec 18 '21 at 16:26

This solution is working, however it re-renders the widget every time symbol is changing. If you change the symbol on the widget itself only price chart and volume chart are rendered.

import React, { useState, useEffect } from "react";
import { Helmet } from 'react-helmet';


const DrawChart = ({ symbol='AAPL' }) => {

const useScript = url => {
    useEffect(() => {
      const script = document.createElement('script');
  
      script.src = url;
      script.async = true;
  
      document.body.appendChild(script);
  
      return () => {
        document.body.removeChild(script);
      }
    }, [url]);
};


return (
    <div className="tradingview-widget-container">
    {useScript('https://s3.tradingview.com/tv.js')}
    <div id="tradingview_2d7e4"></div>
    <div className="tradingview-widget-copyright">
        <a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"></a>
    </div>
    <Helmet>
        <script type="text/javascript">{`
            new window.TradingView.widget({
                "width": 400,
                "height": 400,
                "symbol": \`${symbol}\`,
                "interval": "D",
                "timezone": "Etc/UTC",
                "theme": "dark",
                "style": "1",
                "locale": "en",
                "toolbar_bg": "#f1f3f6",
                "enable_publishing": false,
                "allow_symbol_change": true,
                "container_id": "tradingview_2d7e4"
            })
        `}
        </script>
    </Helmet>
    </div>
)
}

export default DrawChart;

score 0 · Answer 2 · answered Jul 11 '22 at 02:25

An alternative method to the same code worked for me with one line of code to install the widget, and then one line of code to add it into ReactJS.

There are a bunch of additional options you can change, which are detailed in the main website. It's ts but I am using js and didnt notice the difference yet. It's also currently maintained, which is not the case for a lot of these.

https://github.com/JorrinKievit/react-ts-tradingview-widgets

installed for me okay running npm i react-ts-tradingview-widgets then simply adding the line in your code <AdvancedRealTimeChart theme="dark" autosize></AdvancedRealTimeChart>

an example of changing options... <AdvancedRealTimeChart theme="dark" width="500" symbol="NASDAQ:AAPL"></AdvancedRealTimeChart>

How to use TradingView widgets in a React component?

2 Answers2