How to draw line in lightweight-charts or embed code with js code ?

kamranshalilian commented 1 year ago

I need draw line, text, shape and... in chart with javascript code but I can't find anyway for this I find all setting in for chenge backcolor in website (https://www.tradingview.com) but I can't find draw shape in chart

this image is example


<div class="tradingview-widget-container">
  <div id="main"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BTCUSDT/?exchange=BINANCE"
      rel="noopener" target="_blank"><span class="blue-text">BTCUSDT chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
    widget = new TradingView.widget(
      {
        "autosize": true,
        "symbol": "BINANCE:BTCUSDT",
        "interval": "1",
        "timezone": "Etc/UTC",
        "theme": "dark",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": true,
        "withdateranges": true,
        "hide_side_toolbar": false,
        "allow_symbol_change": true,
        "details": true,
        "hotlist": true,
        "calendar": true,
        "container_id": "main"
      }
    );
  </script>
</div>

this my code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Static Chart</title>
  </head>
  <body>
    <h2>Binance BTCUSDT Chart</h2>
    <div id="tvchart"></div>
  </body>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
  <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
  <script type="text/javascript">
    //Pseudo code
//Step 1: Define chart properties.
//Step 2: Create the chart with defined properties and bind it to the DOM element.
//Step 3: Add the CandleStick Series.
//Step 4: Set the data and render.
//Step5 : Plug the socket to the chart

//Code
const log = console.log;

const chartProperties = {
  width: 1920,
  height: 900,
  timeScale: {
    timeVisible: true,
    secondsVisible: false,
  }
}

const domElement = document.getElementById('tvchart');
const chart = LightweightCharts.createChart(domElement, chartProperties);
const candleSeries = chart.addCandlestickSeries();

fetch(`https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1m&limit=1000`)
  .then(res => res.json())
  .then(data => {
    const cdata = data.map(d => {
      return { time: d[0] / 1000, open: parseFloat(d[1]), high: parseFloat(d[2]), low: parseFloat(d[3]), close: parseFloat(d[4]) }
    });
    candleSeries.setData(cdata);
    console.log(cdata)
  })
  .catch(err => log(err))
a = Object()
a.shape = "flag"
a.text = "sell"
a.lock = true
a.overrides = null
console.log(a)
var order = candleSeries.createOrderLine()
  .setText("Buy Line")
  .setLineLength(3)
  .setLineStyle(0)
order.setPrice(25000);

//Dynamic Chart
const socket = io.connect('http://127.0.0.1:4000/');

socket.on('KLINE', (pl) => {
  candleSeries.update(pl);

});

  </script>
</html>

and another code

SlicedSilver commented 1 year ago

To draw a price line with Lightweight Charts you should use the createPriceLine method which is part of the ISeriesAPI.

It appears that you are trying to use createOrderLine() which is part of the API for Charting Library. Please note that Charting Library is a different library to Lightweight Charts.

kamranshalilian commented 1 year ago

Can you help me more with an example because I used this method but it says it doesn't exist @SlicedSilver

SlicedSilver commented 1 year ago

Sure, here is an example: https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-line

spaceofmiah commented 2 months ago

@SlicedSilver is there a way to include a color filler overlay in-between two price line ?

Sample Image: Screenshot 2024-09-05 at 04 55 34

SlicedSilver commented 2 months ago

Not directly with the library, but you could use a Plugin which draws rectangles to add this to your chart.

The create-lwc-plugin wizard will create a rectangle plugin as it's scaffold example (for a drawing primitive) so I would suggest using that as a starting point.

tradingview / lightweight-charts

How to draw line in lightweight-charts or embed code with js code ? #1349