Aktien-Charts

import { StockChart, type TimeRange } from "@sixtyfold/stock";

const data = {
  timestamp: new Float64Array([0, 60_000, 120_000, 180_000]),
  open: new Float64Array([100, 102, 101, 104]),
  high: new Float64Array([103, 104, 105, 107]),
  low: new Float64Array([99, 100, 100, 103]),
  close: new Float64Array([102, 101, 104, 106]),
  volume: new Float64Array([420, 510, 470, 630]),
  length: 4,
};

const canvas = document.querySelector<HTMLCanvasElement>("#chart")!;
const chart = new StockChart(canvas, {
  renderMode: "auto",
  timeScale: "market",
  showVolume: true,
  priceUnit: { prefix: "$", decimals: 2 },
});

await chart.initialize();
chart.setData(data);

// The application owns the controls: choose any labels and ranges, or none.
const controls = document.querySelector("#stock-ranges")!;
for (const range of ["1D", "1M", "ALL"] as const satisfies readonly TimeRange[]) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = range;
  button.addEventListener("click", () => chart.setTimeRange(range));
  controls.append(button);
}


window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/stock rendert geordnete Open-, High-, Low-, Close- und Volume-(OHLCV)-Spalten mit marktspezifischen Analyseebenen. Sein Detailstufen‑(LOD-)Prozess fasst automatisch viele sichtbare Kerzen zu gültigen OHLCV‑Perioden zusammen und kehrt beim Hereinzoomen wieder zu feineren Kerzen zurück.

Die genaue Konfiguration und Methodensignaturen finden sich in den generierten Stock options, StockChart methods, und OHLCV data types Referenzen.

StockChart legt Lifecycle-, Viewport-, Erscheinungsbild-, Overlay-, Renderer- und Batching-Methoden direkt frei. Im marktzeitlichen Modus bewahren seine Viewport‑Methoden komprimierte beobachtete Session‑Koordinaten, während öffentliche Werte echte Zeitstempel bleiben.

Kerzen und Volumen

Wählen Sie filled, hollow oder ohlc Kerzengeometrie. candleColors steuert bullische und bearishe Körper und Dochte. Das Volumen hat unabhängige Farben, Opazität und Pane‑Höhenverhältnis.

Die Renderer‑Genauigkeitsgrenzen bestimmen die Anzeigepräzision für OHLCV‑Tooltips und Crosshair‑Callbacks. Übergeben Sie priceUnit und volumeUnit, wenn die Anwendung explizite Währungs-, Einheiten-, Dezimal‑ oder Kompaktformatierung benötigt.

Vom Host verwaltete Zeitbereiche

StockChart erstellt oder gestaltet keine Zeitbereichs‑Buttons. Die Host‑Anwendung besitzt die Beschriftungen, Anzahl, Reihenfolge, Layout und Zugänglichkeit ihrer Steuerelemente — oder rendert gar keine Controls.

Rufen Sie setTimeRange() auf, wenn ein Button einem der exportierten Komfort‑Presets zugeordnet ist: 1D, 5D, 1M, 3M, 6M, YTD, 1Y, 5Y oder ALL. Ein Preset, das über die geladene Historie hinausgeht, wird an die vorhandenen Daten geclamp t.

const controls = document.querySelector<HTMLElement>("[data-stock-ranges]")!;
const ranges = [
  ["Day", "1D"],
  ["Six months", "6M"],
  ["Everything", "ALL"],
] as const;

for (const [label, range] of ranges) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = label;
  button.dataset.range = range;
  button.addEventListener("click", () => chart.setTimeRange(range));
  controls.append(button);
}

canvas.addEventListener("sixtyfold:time-range-change", (event) => {
  const detail = (event as CustomEvent).detail;
  for (const button of controls.querySelectorAll("button")) {
    button.setAttribute(
      "aria-pressed",
      String(button.dataset.range === detail.range),
    );
  }
});

Für einen Bereich, der kein benanntes Preset ist, senden Sie echte Zeitstempel über die gewöhnliche Viewport‑API:

const twoWeeks = 14 * 24 * 60 * 60_000;
let latestDataTimestamp = 0;

const chart = new StockChart(canvas, {
  onVisibleRangeChange({ dataBounds }) {
    latestDataTimestamp = dataBounds.xMax;
  },
});

customButton.addEventListener("click", () => {
  chart.setViewport({
    xMin: latestDataTimestamp - twoWeeks,
    xMax: latestDataTimestamp,
  });
});

Im market Zeitachsen‑Modus bleiben öffentliche Viewport‑Werte echte Zeitstempel; das Chart konvertiert sie intern in komprimierte beobachtete Session‑Koordinaten. Konstruktor‑Callbacks stellen onTimeRangeChange, onCrosshairMove und onVisibleRangeChange bereit. Namespaced DOM‑Event‑Konstanten werden für dieselben Zustandsänderungen exportiert.

Indikatoren

Eingebaute Indikatoren werden aus Rohkerzen berechnet und für Rendering sowie Crosshair‑Werte auf der aktiven Aggregation abgetastet.

chart.setIndicators([
  { type: "sma", id: "sma-20", period: 20, color: "#ffd166" },
  { type: "ema", id: "ema-50", period: 50, color: "#64d8ff" },
  { type: "bollinger", id: "bb-20", period: 20, deviation: 2 },
  { type: "vwap", id: "vwap-day", reset: "day" },
]);

Pure Funktionen sind aus @sixtyfold/stock/analytics verfügbar: calculateSMA, calculateEMA, calculateBollingerBands, calculateVWAP und computeStockIndicator. Nicht‑endliche Quellwerte unterbrechen ein rollierendes Fenster, anstatt stillschweigend interpoliert zu werden.

Marktschichten

chart.setVolumeProfile({ rows: 48, placement: "right", valueAreaPercent: 70 });
chart.setPriceLines([
  { id: "entry", price: 182.4, label: "Entry", showAxisLabel: true },
]);
chart.setMarkers([
  { id: "earnings", timestamp, position: "above", shape: "diamond", label: "E" },
]);

Das Volumenprofil ist ein geschätztes Volume‑nach‑Preis‑Histogramm, kein Trade‑für‑Trade‑Order‑Flow‑Rekonstrukt. Es unterteilt die sichtbare Preisskala in Reihen und verteilt das Volumen jeder OHLCV‑Kerze gleichmäßig über deren gemeldeten Low‑bis‑High‑Bereich. Breitere horizontale Balken repräsentieren mehr geschätztes Volumen um einen Preis. Bullische und bearishe Anteile orientieren sich an der Kerzenrichtung, der Point of Control markiert die Reihe mit dem höchsten geschätzten Volumen, und der Value Area dehnt sich über benachbarte Reihen aus, bis er den konfigurierten Prozentsatz des sichtbaren Volumens enthält.

Das Profil folgt dem sichtbaren Zeit‑ und Preisbereich. Lange Bereiche verwenden die feinste abgeschlossene Kerzenaggregation, die die Berechnung bei oder unter 4.096 Quellkerzen hält; gezoomte Bereiche verwenden Rohkerzen. Das begrenzt die Interaktion, aber beide Pfade bleiben kerzen‑abgeleitete Approximationen, da OHLCV‑Daten nicht berichten, wo innerhalb der Reichweite jeder Kerze einzelne Trades stattfanden. Beschreiben Sie diese Ebene nicht als exakte Trades‑at‑price, Footprint oder Order‑Flow‑Daten.

Preislinien sind datenverankerte horizontale Niveaus. Marker sind nach Zeitstempel sortiert und auf den sichtbaren Bereich beschnitten; verwenden Sie sparsame Ereignisse statt eines Markers pro Kerze.

Streaming

chart.initStreaming(250_000);
chart.addCandle(timestamp, open, high, low, close, volume);

Für spaltenbasierte Feeds verwenden Sie addCandles oder addCandleBatches. initialTimeRange kann in demselben Renderer‑Durchgang wie ein initial übertragenes Batch angewendet werden, wodurch ein Full‑Range‑Frame bevor der beabsichtigte Viewport erscheint vermieden wird.

Streaming‑Aggregationshierarchien werden außerhalb des Bildschirms neu aufgebaut und ersetzen die aktive Hierarchie atomar. Die vorherige Hierarchie bleibt sichtbar, bis der Ersatz bereit ist.

CSV laden

loadOHLCVFromCSV wird für unkomplizierte Browser‑Datensätze bereitgestellt, mit optionalem Fortschritts‑Callback. Für sehr große Parquet‑ oder proprietäre Feeds dekodieren Sie außerhalb des UI‑Threads und übertragen sechs validierte typisierte Spalten direkt.