CHART-GALERIE / ALLE BEISPIELE AUF DIESER SEITE

Zwei Bibliotheken. Eine Rendering-Disziplin.

Überblicken Sie zuerst den vollständigen Index und fokussieren Sie dann ein Paket. Charts und hervorgehobener Code werden erst nahe am Viewport aktiv; massive synthetische Workloads warten auf einen ausdrücklichen Start.

INDEX / ALLE BEISPIELE AUF EINEN BLICK

Wissen, was vorhanden ist, bevor ein Chart startet.

Titel, Workloads und Rendering-Familien stehen in diesem kompakten Verzeichnis. Öffnen Sie ein Beispiel oder isolieren Sie eine Bibliothek.

@sixtyfold/line

Sixtyfold Line Charts

@sixtyfold/stock

Sixtyfold Stock Charts

@sixtyfold/line

Sixtyfold Line Charts

11LIVE-BEISPIELE

Zeitreihen mit Linien, Stufen, Bereichen, vorzeichenbehafteten Säulen, gestapelten Flächen, Streaming und LOD für Millionen von Punkten.

L01DATA@sixtyfold/line

Eine Million Minuten Einspeisestrom

Ein quellgetreues zweijähriges Stromarchiv wechselt vom ersten Bild mit 4.196 Punkten zu allen vier Stromkanälen und jeder ausdrücklich erfassten Lücke.

Chart startet in Viewport-Nähe

1,052,640Ein-Minuten-Zeilen

Quelle: FeederBW feeder_001
Lizenz: CC BY 4.0

step linesParquetstaged hydrationgaps

Quelldatensatz Lizenztext

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createFeederCurrentData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const feederCurrent = createFeederCurrentData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Eine Million Minuten Einspeisestrom" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Scheinbarer Strom L1", type: "step-after", unit: { suffix: " A" } },
    { name: "Scheinbarer Strom L2", type: "step-after", unit: { suffix: " A" } },
    { name: "Scheinbarer Strom L3", type: "step-after", unit: { suffix: " A" } },
    { name: "Scheinbarer Strom L/PEN", type: "step-after", unit: { suffix: " A" } },
  ],
  minViewportRange: 30 * 60_000,
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(feederCurrent);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L02DATA@sixtyfold/line

Wetterhülle über 200 Standorte

Aus dem offiziellen Stundenfeld entstehen ein quellbasiertes Min–Max-Band, der arithmetische Netzmittelwert und die Temperatur des ausgewählten Abgangs.

Chart startet in Viewport-Nähe

3,508,800Quellbeobachtungen

Quelle: FeederBW ICON-D2 weather
Lizenz: CC BY 4.0

range bandmean200 locationshourly UTC

Quelldatensatz Lizenztext

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createWeatherData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const weather = createWeatherData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Wetterhülle über 200 Standorte" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Min.–Max. von 200 Standorten", type: "range", width: 0,
      band: { fill: 0.18, borderWidth: 0 } },
    { name: "Mittel von 200 Standorten", type: "line" },
    { name: "Temperatur Abgang 001", type: "line", width: 2 },
  ],
  lod: { mode: "adaptive", density: 0.25 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(weather);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L03SCALE@sixtyfold/line

Zwanzig Millionen Werte gemischter Reihen

Sechs im Browser erzeugte Signale kombinieren Linien, zwei Stufenausrichtungen, Bereiche, Balken und ein Preisniveau in einer Worker-gestützten Canvas2D-Ansicht.

Chart startet in Viewport-Nähe

20,000,000Desktop-Werte

Quelle: Deterministic in-browser generator
Lizenz: Synthetic

≈3.33M × 6workermixed seriesadaptive LOD

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createGeneratedSignalsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const generatedSignals = createGeneratedSignalsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Zwanzig Millionen Werte gemischter Reihen" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Signal A (Kern)", type: "line" },
    { name: "Signal B (Balken)", type: "bar" },
    { name: "Signal C (Stufe)", type: "step-after" },
    { name: "Signal D (Werteband)", type: "range" },
    { name: "Signal E (Mittige Stufe)", type: "step-mid" },
    { name: "Signal F (Preis)", type: "line" },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(generatedSignals);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L04SCALE@sixtyfold/line

Sechs Millionen Telemetriewerte aus einem KI-Rechenzentrum

Eine synthetische Störungsspur mit 1,5 Millionen Zeitpunkten verfolgt Rechenauslastung, HBM-Druck, thermische Reserve und Drosselrate auf einer gemeinsamen Betriebszeitachse.

Chart startet in Viewport-Nähe

6,000,000Desktop-Telemetriewerte

Quelle: Deterministic synthetic AI accelerator telemetry
Lizenz: Synthetic

1.5M × 4accelerator fleetincident analysisadaptive LOD

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createAcceleratorTelemetryData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const acceleratorTelemetry = createAcceleratorTelemetryData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Sechs Millionen Telemetriewerte aus einem KI-Rechenzentrum" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Rechenauslastung", type: "line", width: 2,
      unit: { suffix: " %" } },
    { name: "HBM-Druck", type: "line", width: 1.6,
      unit: { suffix: " %" } },
    { name: "Thermische Reserve", type: "line", width: 1.4,
      unit: { suffix: " %" } },
    { name: "Drosselrate", type: "step-after", width: 1.2,
      unit: { suffix: " %" } },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(acceleratorTelemetry);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L05SCALE@sixtyfold/line

Acht Millionen Werte in einer Transformer-Inferenzpipeline

Zwei Millionen synthetische Fünf-Millisekunden-Intervalle zerlegen die Bereitstellungslatenz in Warteschlange, Prefill, KV-Cache-Übertragung und Token-Decodierung, sodass ein wachsender Engpass von der Flottenansicht bis zur einzelnen Anfrage sichtbar bleibt.

Chart startet in Viewport-Nähe

8,000,000Desktop-Latenzwerte

Quelle: Deterministic synthetic transformer-serving trace
Lizenz: Synthetic

2M × 4inference latencystacked pipelineworker rendering

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createTransformerInferenceData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const transformerInference = createTransformerInferenceData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Acht Millionen Werte in einer Transformer-Inferenzpipeline" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Warteschlange", type: "stacked-area",
      stack: { fill: 0.68 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "Prefill", type: "stacked-area",
      stack: { fill: 0.64 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "KV-Cache-Übertragung", type: "stacked-area",
      stack: { fill: 0.6 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "Token-Decodierung", type: "stacked-area",
      stack: { fill: 0.56 }, unit: { suffix: " ms", decimals: 1 } },
  ],
  lod: { mode: "pyramid", density: 0.75 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(transformerInference);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L06SCALE@sixtyfold/line

Zehn Millionen Messwerte eines neuronalen Elektrodenarrays

Acht synthetische, nicht klinische 30-kHz-Kanäle erhalten Burst-Aktivität und biphasische Spitzen über 1,25 Millionen Zeitpunkte je Kanal; die Kurven sind zum Vergleich vertikal versetzt.

Chart startet in Viewport-Nähe

10,000,000Desktop-Elektrodenwerte

Quelle: Deterministic synthetic non-clinical neural-array recording
Lizenz: Synthetic

1.25M × 830 kHz arraybiphasic spikesinteractive legend

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createNeuralArrayData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const neuralArray = createNeuralArrayData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Zehn Millionen Messwerte eines neuronalen Elektrodenarrays" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Elektrode 1", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elektrode 2", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elektrode 3", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elektrode 4", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elektrode 5", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elektrode 6", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elektrode 7", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elektrode 8", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
  ],
  lod: { mode: "adaptive", density: 1 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(neuralArray);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L07DRAW@sixtyfold/line

Mehrere Linien auf einer Zeitachse

Drei unterschiedlich skalierte Signale zeigen gemeinsame Zeitkoordinaten, Spline-Interpolation, interaktive Legende, Fadenkreuz und Tooltips.

Chart startet in Viewport-Nähe

120,000Messpunkte je Reihe

Quelle: Deterministic waveform fixture
Lizenz: Synthetic

multi-linesplinetooltipslegend

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createWaveformsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const waveforms = createWaveformsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Mehrere Linien auf einer Zeitachse" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Primär", type: "line", width: 1.8 },
    { name: "Sekundär", type: "line", width: 1.4 },
    { name: "Referenz", type: "line", width: 1 },
  ],
  interpolation: "spline",
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(waveforms);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L08DRAW@sixtyfold/line

Bidirektionale Residuen und Kontrollgrenzen

Fünfzigtausend vorzeichenbehaftete Residuen wachsen von einer Nulllinie, während sich gestufte obere und untere Grenzen auf derselben Zeitachse ändern.

Chart startet in Viewport-Nähe

50,000vorzeichenbehaftete Residuen

Quelle: Deterministic process-control fixture
Lizenz: Synthetic

signed columnszero baselinecontrol limitsstep-mid

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createResidualsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const residuals = createResidualsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Bidirektionale Residuen und Kontrollgrenzen" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Residuum", type: "bar",
      bar: { baseline: 0, widthRatio: 0.82 } },
    { name: "Obere Grenze", type: "step-mid", width: 1.4 },
    { name: "Untere Grenze", type: "step-mid", width: 1.4 },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(residuals);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L09DRAW@sixtyfold/line

Vier kumulative gestapelte Flächen

Vier positive Reihen verwenden kumulative Geometrie und eine gemeinsame Pyramide, damit die Reduktion die Zusammensetzung des Stapels nie verändert.

Chart startet in Viewport-Nähe

36,000Messpunkte je Schicht

Quelle: Deterministic stacked-series fixture
Lizenz: Synthetic

stacked areafour layerspyramid LODcumulative

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createStackedValuesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const stackedValues = createStackedValuesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Vier kumulative gestapelte Flächen" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Schicht A", type: "stacked-area", stack: { fill: 0.72 } },
    { name: "Schicht B", type: "stacked-area", stack: { fill: 0.66 } },
    { name: "Schicht C", type: "stacked-area", stack: { fill: 0.6 } },
    { name: "Schicht D", type: "stacked-area", stack: { fill: 0.54 } },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(stackedValues);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L10DRAW@sixtyfold/line

Mehrschichtige und leuchtende Flächenfüllungen

Zwei Linienreihen vergleichen mehrschichtige und leuchtende Füllungen, während der Linienzug der maßgebliche Wert bleibt.

Chart startet in Viewport-Nähe

64,000Messpunkte je Reihe

Quelle: Deterministic area-fill fixture
Lizenz: Synthetic

area fillgradientglowfill-to-zero

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createFilledSeriesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const filledSeries = createFilledSeriesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Mehrschichtige und leuchtende Flächenfüllungen" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Mehrschichtige Füllung", type: "line", width: 2,
      fill: 0.3, fillEffect: "layered", fillToZero: true },
    { name: "Leuchtfüllung", type: "line", width: 1.2,
      fill: 0.16, fillEffect: "glow" },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(filledSeries);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L11DRAW@sixtyfold/line

Interaktive Legende für acht Reihen

Die semantische Legende blendet einzelne Verläufe aus und wieder ein, ohne den übertragenen Datensatz zu kopieren oder umzuformen.

Chart startet in Viewport-Nähe

8unabhängige Reihen

Quelle: Deterministic multi-series fixture
Lizenz: Synthetic

interactive legendvisibility APIeight seriescallbacks

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createEightSeriesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const eightSeries = createEightSeriesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  rangeSelector: { visible: true },

  labels: { top: { text: "Interaktive Legende für acht Reihen" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: Array.from({ length: 8 }, (_, index) => ({
    name: ["Reihe 1","Reihe 2","Reihe 3","Reihe 4","Reihe 5","Reihe 6","Reihe 7","Reihe 8"][index],
    type: "line",
    width: index < 3 ? 1.8 : 1,
  })),
  legend: {
    visible: true,
    interactive: true,
    allowHideAll: false,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(eightSeries);
chart.setSeriesVisibilityCallback(({ visibility }) => {
  console.log("Visible series", visibility);
});

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/stock

Sixtyfold Stock Charts

05LIVE-BEISPIELE

Spezialisiertes OHLCV mit Marktzeit, Volumen, Rohkerzen-Indikatoren, Profilen, Preisniveaus und Ereignismarkern.

S01MARKET@sixtyfold/stock

Exaktes BTC/USDT: vom Archiv bis live

Ein ausdrücklich gestarteter Desktop-Workload lädt das gesperrte Parquet-Archiv mit einminütigen Binance-Kerzen, dekodiert alle beobachteten Kerzen abseits des Hauptthreads, ergänzt sie über Sixtyfolds gemeinsames Same-Origin-Relay und fragt danach jede abgeschlossene Minute ab. Es werden keine historischen Minuten synthetisiert.

Chart startet in Viewport-Nähe

2017 → liveexakter beobachteter Verlauf

Quelle: Exact Binance Spot monthly archive plus Sixtyfold live relay
Nutzungsgrundlage: Binance developer API-use guidance

measured Parquet downloadobserved 1m candlesexact catch-upminute-boundary polling

Quelldatensatz Hinweise zur API-Nutzung

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";

import {
  exactArchiveEnd,
  loadExactBtcArchive,
  prepareBinanceLiveFeed,
} from "./same-origin-market-relay";

const canvas = document.querySelector("canvas")!;

const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "continuous",
  showVolume: true,
  labels: {
    top: { text: "Exaktes BTC/USDT: vom Archiv bis live" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Eröffnung",
    "high": "Hoch",
    "low": "Tief",
    "close": "Schluss",
    "change": "Änderung",
    "changePercent": "Änderung %",
    "volume": "Volumen"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();

const feed = prepareBinanceLiveFeed({
  symbol: "BTCUSDT",
  afterTimestamp: exactArchiveEnd,
  relayMode: "archive-tail",
  streamEnabled: false,
  onCandles: ({ timestamp, open, high, low, close, volume }) =>
    chart.addCandles(timestamp, open, high, low, close, volume),
});
void Promise.all([
  loadExactBtcArchive(),
  feed.ready,
]).then(([archive, bootstrap]) => {
  chart.initStreaming(5_800_000);
  chart.addCandleBatches(
    [archive, bootstrap.columns],
    { initialTimeRange: "6M" },
  );
  feed.start();
});
window.addEventListener("pagehide", () => feed.close(), { once: true });

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S02MARKET@sixtyfold/stock

Gefülltes OHLCV mit Volumen

Geordnete Kerzen und ein unabhängiger Volumenbereich aggregieren gültige OHLCV-Perioden statt Linienchart-Buckets.

Chart startet in Viewport-Nähe

18,000generierte Kerzen

Quelle: Deterministic OHLCV fixture
Lizenz: Synthetic

filled candlesvolumeOHLCV LODhost-owned ranges

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "Gefülltes OHLCV mit Volumen" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Eröffnung",
    "high": "Hoch",
    "low": "Tief",
    "close": "Schluss",
    "change": "Änderung",
    "changePercent": "Änderung %",
    "volume": "Volumen"
  },
  },
  candleStyle: "filled",
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S03MARKET@sixtyfold/stock

Technische Indikatoren auf Rohkerzen

SMA, EMA, Bollinger-Bänder und täglich zurückgesetzter VWAP werden aus Rohkerzen berechnet, bevor die aktive Aggregation abgetastet wird.

Chart startet in Viewport-Nähe

4Indikatorfamilien

Quelle: Deterministic OHLCV fixture
Lizenz: Synthetic

SMAEMABollingerVWAP

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "Technische Indikatoren auf Rohkerzen" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Eröffnung",
    "high": "Hoch",
    "low": "Tief",
    "close": "Schluss",
    "change": "Änderung",
    "changePercent": "Änderung %",
    "volume": "Volumen"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setIndicators([
  { type: "sma", id: "sma-20", label: "SMA 20", period: 20 },
  { type: "ema", id: "ema-50", label: "EMA 50", period: 50 },
  { type: "bollinger", id: "bb-20", label: "BB 20", period: 20, deviation: 2 },
  { type: "vwap", id: "vwap-day", label: "VWAP", reset: "day" },
]);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S04MARKET@sixtyfold/stock

Geschätztes Volumenprofil des sichtbaren Bereichs

Eine kerzenbasierte Preis-Volumen-Schätzung verteilt OHLCV-Volumen über die Tief–Hoch-Spanne jeder Kerze. Sie folgt dem sichtbaren Bereich mit begrenzter Quellaggregation für lange Zeiträume; sie enthält keine exakten Trades je Preis.

Chart startet in Viewport-Nähe

48Preiszeilen

Quelle: Deterministic OHLCV fixture
Lizenz: Synthetic

estimated volume profilevalue areavisible rangeOHLCV

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "Geschätztes Volumenprofil des sichtbaren Bereichs" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Eröffnung",
    "high": "Hoch",
    "low": "Tief",
    "close": "Schluss",
    "change": "Änderung",
    "changePercent": "Änderung %",
    "volume": "Volumen"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setVolumeProfile({
  rows: 48,
  placement: "right",
  valueAreaPercent: 70,
});
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S05MARKET@sixtyfold/stock

Preislinien und Zeitstempelmarker

Datenverankerte Niveaus und nach Zeitstempel sortierte Marker bleiben gefiltert, thematisiert und mit der Marktzeitnavigation synchronisiert.

Chart startet in Viewport-Nähe

O(n)Marker-Auswahl

Quelle: Deterministic OHLCV fixture
Lizenz: Synthetic

price linesevent markersmarket timebinary culling

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "Preislinien und Zeitstempelmarker" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "de-DE",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "de-DE",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Eröffnung",
    "high": "Hoch",
    "low": "Tief",
    "close": "Schluss",
    "change": "Änderung",
    "changePercent": "Änderung %",
    "volume": "Volumen"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setPriceLines([
  { id: "entry", price: 182.4, label: "Einstieg", showAxisLabel: true },
  { id: "risk", price: 174.8, label: "Risiko", showAxisLabel: true },
]);
chart.setMarkers([
  { id: "release", timestamp: ohlcv.timestamp[Math.floor(ohlcv.length * 0.72)],
    position: "above",
    shape: "diamond", label: "V" },
]);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

WEITER / MIT DERSELBEN API BAUEN

Jedes Beispiel nutzt die veröffentlichte API.

Keine privaten Hooks, keine Screenshot-Attrappen und keine Framework-spezifische Datenumformung. Weiter geht es in der vollständigen Referenz.

Dokumentation öffnen