lightweightscharts of tradingview for intraday data

Question

    <!DOCTYPE html>
<html>
<head>
  <title>TradingView Chart</title>
  <script src="lightweightcharts.js"></script>
</head>
<body>
  <div id="chartContainer" style="width: 800px; height: 600px;"></div>

  <script>
    const chart = LightweightCharts.createChart(document.getElementById('chartContainer'), {
      width: 800,
      height: 600,
    });

    const candlestickSeries = chart.addCandlestickSeries();

    const intradayData = [
      { time: '2022-01-01 09:30', open: 100, high: 110, low: 90, close: 105 },
      { time: '2022-01-01 09:31', open: 105, high: 115, low: 100, close: 110 },
      // ...
    ];

    const formattedData = intradayData.map(data => ({
      time: new Date(data.time),
      open: data.open,
      high: data.high,
      low: data.low,
      close: data.close,
    }));

    candlestickSeries.setData(formattedData);
  </script>
</body>
</html>

so far i have used this but it's not working.i am trying to get 1minute data chart in tradingview style but it just shows overlapped candles coz of same date and says invalid date upon hovering

score 1 · Answer 1 · answered Jun 03 '23 at 19:07

If your chart displays an intraday interval you should use a UNIX Timestamp.

Note that JavaScript Date APIs like Date.now return a number of milliseconds but UTCTimestamp expects a number of seconds.

https://tradingview.github.io/lightweight-charts/docs/api#utctimestamp https://tradingview.github.io/lightweight-charts/docs/api#time

Thus your map function should be something like this (divide the time value by 1000):

const formattedData = intradayData.map(data => ({
  time: (new Date(data.time)).getTime() / 1000,
  open: data.open,
  high: data.high,
  low: data.low,
  close: data.close,
}));

Working example: https://jsfiddle.net/27rh9fLv/1/

lightweightscharts of tradingview for intraday data

1 Answers1