I'm using Tradigview Chart Widget to display data. I can't find a way to draw lines(or something else) on chart, and to save the drawings in order to display them when the page reloads.

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

I'm using Tradigview Chart Widget to display data. I can't find a way to draw lines(or something else) on chart, and to save the drawings in order to display them when the page reloads.

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div id="tradingview_6fd01"></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": "Light",
            "style": "1",
            "locale": "en",
            "toolbar_bg": "#f1f3f6",
            "enable_publishing": false,
            "allow_symbol_change": true,
            "container_id": "tradingview_6fd01"
        });
    </script>
</div>
<!-- TradingView Widget END -->

codepen: http://codepen.io/rpokrovskij/pen/LgGzyg

• javascript
• charts
• cryptography
• tradingview-api

• Have you came up with a solution? I`m facing the same problem. – bitQUAKE Commented Sep 26, 2018 at 14:51
• SO code snippet doesn't work with tradingview . use codepen: codepen.io/rpokrovskij/pen/LgGzyg – Roman Pokrovskij Commented Oct 3, 2018 at 8:24
• what kind of figure you want to draw? If it just points or circle you could add a overlay canvas on top of the graph. Record the coordinates and when save it. On reload redraw the figures. – Pawnesh Kumar Commented Oct 3, 2018 at 10:11
• @bitQUAKE, what dou want to draw - any graphic primitives on knowing coordinates? – Dan Brandt Commented Oct 3, 2018 at 11:39
• Yes, I want to draw shapes into these graphs like in the tradingview charting library where you define X as Date and Y as price. But I guess Roman Pokrovskij is right. This will not work on widgets. – bitQUAKE Commented Oct 3, 2018 at 11:50

2 Answers 2

For anyone who wants to draw on Widget but is not dependent on tradingview live data can use the tradingview charting library. It is free but you have to request access to the github repository.

Here is an example how easy it is to draw a shape:

var order = widget.chart().createOrderLine()
    .setText("Buy Line")
    .setLineLength(3) 
    .setLineStyle(0) 
    .setQuantity("221.235 USDT")
order.setPrice(7000);

This will then result in the following drawing (BTC/USDT chart):

There are plenty of example in the github repository so you wont be lost. BUT you have to create an own datafeed or at least set up a websocket connection to your desired data provider/marketplace.

I hope this helps everyone who is facing the same problem.

Tradigview Chart Widget can show only fixed list of predefined TradingView "studies":

https://www.tradingview.com/wiki/Widget:TradingView_Widget

that means it is impossible to create custom charts with it.