Candlestick chart in JavaScript with Lightweight Charts and live data

// npm install ws   (Node.js 18 or newer)
import { createServer } from "node:http";
import { readFile } from "node:fs/promises";
import WebSocket from "ws";

const KEY = process.env.TICKERLAYER_API_KEY;
const REST = "https://api.tickerlayer.com";
const STREAM = "wss://stream.tickerlayer.com/?apiKey=" + encodeURIComponent(KEY);
const SYMBOL = "BTCUSD";
const PORT = 8080;

// ---- Historical bars: yesterday and today, 1-minute, oldest first ----
let cache = { at: 0, bars: null };

async function loadBars() {
  if (cache.bars && Date.now() - cache.at < 5_000) return cache.bars; // many viewers, one request
  const now = new Date();
  const to = now.toISOString().slice(0, 10);
  const from = new Date(now.getTime() - 86_400_000).toISOString().slice(0, 10);
  const url = `${REST}/crypto/agg/${SYMBOL}/1/minute/${from}/${to}?sort=asc&limit=5000`;
  const res = await fetch(url, { headers: { "x-api-key": KEY } });
  if (!res.ok) throw new Error(`bars request failed with HTTP ${res.status}`);
  const body = await res.json();
  // TickerLayer bars use t in Unix milliseconds; the chart wants seconds.
  const bars = body.results.map((b) => ({ time: b.t / 1000, open: b.o, high: b.h, low: b.l, close: b.c }));
  cache = { at: Date.now(), bars };
  return bars;
}

// ---- Live trades: one upstream socket, fanned out to every open page ----
const pages = new Set(); // open Server-Sent Events responses
let upstream = null;
let backoffMs = 1_000;

function connectUpstream() {
  const ws = new WebSocket(STREAM, { perMessageDeflate: false });
  let readyAt = 0;
  upstream = ws;
  ws.on("message", (data) => {
    const msg = JSON.parse(data.toString());
    if (msg.type === "system" && msg.event === "ready") {
      readyAt = Date.now();
      // snapshot: false, because the REST bars already contain everything up to now.
      ws.send(JSON.stringify({ action: "subscribe", channels: ["crypto.trades"], symbols: [SYMBOL], snapshot: false }));
    } else if (msg.type === "trade" && msg.symbol === SYMBOL) {
      const line = `data: ${JSON.stringify({ price: Number(msg.price), ts: msg.ts })}\n\n`;
      for (const res of pages) res.write(line);
    } else if (msg.type === "error") {
      console.error(`stream error ${msg.code}: ${msg.message}`);
    }
  });
  ws.on("error", (err) => console.error(`stream socket error: ${err.message}`));
  ws.on("close", (code) => {
    upstream = null;
    if (pages.size === 0) return; // nobody is watching: stay disconnected
    if (readyAt && Date.now() - readyAt > 30_000) backoffMs = 1_000; // it was healthy
    const wait = Math.round(backoffMs / 2 + Math.random() * (backoffMs / 2));
    backoffMs = Math.min(backoffMs * 2, 30_000);
    console.log(`stream closed with ${code}; reconnecting in ${wait} ms`);
    setTimeout(() => { if (!upstream && pages.size > 0) connectUpstream(); }, wait);
  });
}

// ---- HTTP: the page, the bars and the trade stream ----
createServer(async (req, res) => {
  try {
    if (req.url === "/") {
      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
      res.end(await readFile(new URL("./index.html", import.meta.url)));
    } else if (req.url === "/bars") {
      res.writeHead(200, { "Content-Type": "application/json" });
      res.end(JSON.stringify(await loadBars()));
    } else if (req.url === "/stream") {
      res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache, no-transform" });
      res.write(": connected\n\n");
      pages.add(res);
      if (!upstream) connectUpstream();
      req.on("close", () => {
        pages.delete(res);
        if (pages.size === 0) upstream?.close(1000);
      });
    } else {
      res.writeHead(404).end();
    }
  } catch (err) {
    console.error(err);
    if (!res.headersSent) res.writeHead(502, { "Content-Type": "text/plain" });
    res.end(String(err.message));
  }
}).listen(PORT, () => console.log(`open http://localhost:${PORT}`));

// Comment lines keep idle proxies from closing the event stream.
setInterval(() => { for (const res of pages) res.write(": keep-alive\n\n"); }, 20_000);

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>BTCUSD, 1-minute candles</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
  <style>
    html, body { margin: 0; height: 100%; background: #0f1115; color: #d1d4dc; font: 14px system-ui, sans-serif; }
    #chart { position: absolute; inset: 0; }
    #status { position: absolute; top: 8px; left: 12px; z-index: 2; }
  </style>
</head>
<body>
  <div id="status">Loading bars...</div>
  <div id="chart"></div>
  <script>
    const { createChart, CandlestickSeries } = LightweightCharts;
    const status = document.getElementById("status");

    const chart = createChart(document.getElementById("chart"), {
      autoSize: true,
      layout: { background: { color: "#0f1115" }, textColor: "#d1d4dc" }, // attributionLogo stays on
      grid: { vertLines: { color: "#1e222d" }, horzLines: { color: "#1e222d" } },
      timeScale: { timeVisible: true, secondsVisible: false },
    });
    const series = chart.addSeries(CandlestickSeries, {
      upColor: "#26a69a", downColor: "#ef5350", borderVisible: false,
      wickUpColor: "#26a69a", wickDownColor: "#ef5350",
    });

    let candle = null;   // the newest candle, the only one we ever change
    let closeTs = 0;     // ts of the trade that set candle.close
    const early = [];    // trades that arrive before the bars do

    function applyTrade({ price, ts }) {
      const time = Math.floor(ts / 60_000) * 60; // start of the trade's minute, in seconds
      if (time < candle.time) return;           // late trade for a finished candle: skip it
      if (time > candle.time) {
        candle = { time, open: price, high: price, low: price, close: price };
        closeTs = ts;
      } else {
        candle.high = Math.max(candle.high, price);
        candle.low = Math.min(candle.low, price);
        if (ts >= closeTs) { candle.close = price; closeTs = ts; }
      }
      series.update({ ...candle });
    }

    // 1. Start listening first, so no trade falls between the history and the stream.
    const events = new EventSource("/stream");
    events.onmessage = (event) => {
      const trade = JSON.parse(event.data);
      if (candle) applyTrade(trade); else early.push(trade);
    };
    events.onerror = () => { status.textContent = "Stream interrupted, retrying..."; };
    events.onopen = () => { if (candle) status.textContent = "BTCUSD, live"; };

    // 2. Then load history, draw it and replay whatever arrived meanwhile.
    fetch("/bars")
      .then((res) => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); })
      .then((bars) => {
        if (bars.length === 0) throw new Error("no bars in range");
        series.setData(bars);
        candle = { ...bars[bars.length - 1] };
        closeTs = candle.time * 1000;
        early.splice(0).forEach(applyTrade);
        status.textContent = "BTCUSD, live";
      })
      .catch((err) => { status.textContent = `Could not load bars: ${err.message}`; });
  </script>
</body>
</html>

{"action": "subscribe", "channels": ["stocks.agg"], "symbols": ["US:KO"], "interval": "1m", "session": "regular"}

{"type":"agg","channel":"stocks.agg","asset":"stocks","symbol":"US:KO","interval":"1m","session":"regular","o":88.48,"h":88.52,"l":88.46,"c":88.5,"v":41230,"n":312,"vw":88.4917,"ts":1789133400000}