Aktiencharts

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 Volumen-(OHLCV)-Spalten mit markt­spezifischen Analyse­schichten. Sein Detailstufen-(LOD)-Prozess kombiniert automatisch viele sichtbare Kerzen zu gültigen OHLCV‑Perioden und zeigt beim Hereinzoomen wieder feinere Kerzen an.

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

StockChart bietet direkt Methoden für Lifecycle, Viewport, Darstellung, Overlay, Renderer und Batching. Im Market‑Time‑Modus erhalten seine Viewport‑Methoden komprimierte beobachtete‑Sitzungs‑Koordinaten, während öffentliche Werte echte Zeitstempel bleiben.

Kerzen und Volumen

Wählen Sie filled, hollow oder ohlc für die Kerzengeometrie. candleColors steuert bullish‑ und bearish‑Körper sowie Dochte. Das Volumen hat unabhängige Farben, Opazität und Pane‑Höhenverhältnis.

Der Renderer begrenzt die Anzeigepräzision für OHLCV‑Tooltips und Crosshair‑Callbacks. Liefern Sie priceUnit und volumeUnit, wenn die Anwendung explizite Währungs-, Einheiten-, Dezimal‑ oder Kompaktformatierung erfordert.

Vom Host verwaltete Zeitbereiche

StockChart erstellt oder gestaltet keine Schaltflächen für Zeitbereiche. Die Host-Anwendung besitzt die Beschriftungen, Anzahl, Reihenfolge, Anordnung und Barrierefreiheit ihrer Steuerelemente — oder kann überhaupt keine Steuerelemente rendern.

Rufen Sie setTimeRange() auf, wenn eine Schaltfläche auf eines der exportierten Komfort‑Presets abbildet: 1D, 5D, 1M, 3M, 6M, YTD, 1Y, 5Y oder ALL. Ein Preset, das über die geladene Historie hinausreicht, wird auf die verfügbaren Daten begrenzt.

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 Diagramm wandelt sie intern in komprimierte beobachtete Sitzungskoordinaten um. Konstruktor‑Callbacks liefern onTimeRangeChange, onCrosshairMove und onVisibleRangeChange. Für dieselben Zustandsänderungen werden namespacing‑geschützte DOM‑Event‑Konstanten exportiert.

Indikatoren

Eingebaute Indikatoren werden aus Rohkerzen berechnet und für Rendering sowie Kreuzhair‑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 verfügbar unter @sixtyfold/stock/analytics: calculateSMA, calculateEMA, calculateBollingerBands, calculateVWAP und computeStockIndicator. Nicht‑endliche Quellwerte unterbrechen ein rollendes Fenster, anstatt stillschweigend interpoliert zu werden.

Markt-Layer

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 Volume-Profile ist ein geschätztes Volumen‑nach‑Preis‑Histogramm, nicht eine Trade‑für‑Trade‑Order‑Flow‑Rekonstruktion. Es teilt die sichtbare Preisskala in Zeilen und verteilt das Volumen jeder OHLCV‑Kerze gleichmäßig über deren berichteten Tief‑bis‑Hoch‑Bereich. Breitere horizontale Balken stehen für mehr geschätztes Volumen um einen Preis. Bullische und bearische Anteile orientieren sich an der Kerzenrichtung, der Point‑of‑Control markiert die Zeile mit dem größten geschätzten Volumen, und der Value‑Area‑Bereich erweitert sich durch benachbarte Zeilen, bis er den konfigurierten Prozentsatz des sichtbaren Volumens enthält.

Das Profile folgt dem sichtbaren Zeit‑ und Preisbereich. Lange Bereiche verwenden die feinste abgeschlossene Kerzenaggregation, die die Berechnung bei oder unter 4.096 Quellkerzen hält; stark hineingezoomte Bereiche verwenden Rohkerzen. Das begrenzt die Interaktion, aber beide Wege bleiben kerzenbasierte Näherungen, da OHLCV‑Daten nicht angeben, wo innerhalb des Kerzenbereichs einzelne Trades stattfanden. Beschreiben Sie diese Ebene nicht als exakte Trades‑at‑Price-, Footprint‑ oder Order‑Flow‑Daten.

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

Streaming

Erstellen Sie nach initialize() einen Stream mit einer positiven Ganzzahlkapazität:

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

Streaming-Zeitstempel müssen endlich und strikt aufsteigend sein, einschließlich über Aufrufe, zwischengespeicherte skalare Kerzen und Chunk-Grenzen hinweg. Ein Append mit demselben Zeitstempel aktualisiert keine bestehende Kerze; deduplizieren Sie zuerst den Feed.

Für spaltenorientierte Feeds verwenden Sie addCandles oder addCandleBatches mit sechs gleich großen OHLCV-Spalten. addCandleBatches validiert die vollständige Chunk-Liste vor jeder Übertragung. Ungültige Zeitstempelreihenfolge, nicht-endliche Zeitstempel oder ungleiche Längen werden abgewiesen, ohne zwischengespeicherte Kerzen zu leeren oder Caller-Puffer zu trennen. Gültige skalare und Bulk-Aufrufe behalten ihre Reihenfolge. Im Worker-Modus werden gültige Puffer übertragen, daher erfassen Sie Werte, die die Anwendung benötigt, bevor Sie anhängen.

initialTimeRange kann im selben Renderer-Durchlauf wie ein initial übergebener Stapel angewendet werden, wodurch ein Vollbereichs-Frame vermieden wird, bevor das beabsichtigte Viewport erscheint. Market-Time-Viewports behalten ihre Zeitstempelanker bei, wenn neue Kerzen die inferierte Kadenz ändern.

Statische setData hat einen anderen Ordnungsvertrag: monoton auf- oder absteigende Historien werden akzeptiert, einschließlich gleicher Zeitstempel, und auf aufsteigende Reihenfolge normalisiert. Das Ersetzen von Daten oder das Zurücksetzen des Streamings verwirft ausstehende Samples und bricht die Viewport-Animation des alten Datensatzes ab.

Streaming-Aggregationshierarchien werden außerhalb des Bildschirms aus Snapshots wieder aufgebaut und ersetzen die aktive Hierarchie atomar. Abgeschlossene Ebenen bleiben nutzbar, während Anhänge fortgesetzt werden; das Diagramm veröffentlicht keine teilweise erstellten Ersetzungen.

CSV laden

loadOHLCVFromCSV wird für einfache Browser-Datensätze bereitgestellt und unterstützt optional einen Fortschritts-Callback. Bei sehr großen Parquet- oder proprietären Feeds dekodieren Sie außerhalb des UI-Threads und übertragen Sie sechs validierte typisierte Spalten direkt.