<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css"> 
  <script src="https://unpkg.com/lightweight-charts@3.4.0/dist/lightweight-charts.standalone.production.js"></script>
</head>
<body>
  <div id="chart-container"></div>
  <script>
    var chart = LightweightCharts.createChart(document.getElementById('chart-container'), {
      crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
      layout: { background: { color: '#222' }, textColor: '#D2D5DC'},
      grid: {vertLines: { color: 'rgba(0, 0, 0, 0)' }, horzLines: { color: 'rgba(0, 0, 0, 0)' }},
      timeScale: { visible: false },
      priceScale:{borderColor: '#D2D5DC'},
    });

    var candleSeries = chart.addCandlestickSeries();
    var historicalData = [];

    async function fetchHistoricalData() {
      try {
        const response = await fetch('https://fapi.binance.com/fapi/v1/klines?symbol=BTCUSDT&interval=5m&limit=1500');
        historicalData = (await response.json()).map(item => ({
          time: item[0] / 1000,
          open: parseFloat(item[1]),
          high: parseFloat(item[2]),
          low: parseFloat(item[3]),
          close: parseFloat(item[4])
        }));
        candleSeries.setData(historicalData);
        // After the historical data is set, add the marker
        addMarker();
      } catch (error) {
        console.error('Error fetching historical data:', error);
      }
    }

    function addMarker() {
      // Replace with the correct timestamp. This is just an example timestamp.
      const markerTimestamp = 1700173200; // Converted to seconds (from milliseconds)
      // Find the candle that matches the timestamp
      const candle = historicalData.find(c => c.time === markerTimestamp);
      if (candle) {
        // Use the 'high' price to place the marker above the candle
        candleSeries.setMarkers([{
          time: markerTimestamp,
          position: 'aboveBar',
          color: 'orange',
          shape: 'circle',
          text: 'A', // Text inside the marker, could be empty or any character
          size: 2 // Size of the marker
        }]);
      }
    }

    const socket = new WebSocket('wss://fstream.binance.com/ws/btcusdt@kline_5m');

    socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  const kline = data.k;
  const candleData = {
    time: kline.t / 1000,
    open: parseFloat(kline.o),
    high: parseFloat(kline.h),
    low: parseFloat(kline.l),
    close: parseFloat(kline.c)
  };

  if (historicalData.length > 0) {
    const lastDataPoint = historicalData[historicalData.length - 1];
    if (lastDataPoint.time === candleData.time) {
      lastDataPoint.close = candleData.close;
      lastDataPoint.high = Math.max(lastDataPoint.high, candleData.high);
      lastDataPoint.low = Math.min(lastDataPoint.low, candleData.low);
      candleSeries.update(lastDataPoint);
    } else if (candleData.time > lastDataPoint.time) {
      historicalData.push(candleData);
      candleSeries.update(candleData);
    }
  } else {
    historicalData.push(candleData);
    candleSeries.setData(historicalData);
  }
};
    socket.onclose = (event) => {
      console.error('WebSocket closed:', event);
    };

    socket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    async function initializeChart() {
      historicalData = await fetchHistoricalData();
      candleSeries.setData(historicalData);
    }
    
    
    initializeChart();
    
  </script>
</body>
</html>

the most recent bar is no longer updating live after I added the marker code