Installation

Sixtyfold-Pakete sind ESM-only und werden unter dem npm-Scope @sixtyfold veröffentlicht. Die Browser-Runtimes Core, Line und Stock haben keine Laufzeitabhängigkeiten von Drittanbietern; Line und Stock hängen nur von Core ab. Framework-Adapter deklarieren das Host-Framework als Peer-Dependency, SSR verwendet eine Canvas2D-Implementierung, die die Anwendung bereitstellt, und das optionale MCP-Entwicklertool läuft als separater lokaler Prozess.

Die aktuelle stabile Version ist 1.0.2, veröffentlicht am 1. November 2026. Sie behebt, dass Line- und Stock-Worker-Diagramme nach Sichtbarkeits- oder Fokusänderungen in Firefox 159 nicht mehr verfügbar waren. Es gibt keine Änderungen der öffentlichen API. Prüfen Sie beim Upgrade die 1.0.2-Release-Notes und die streaming contracts. Halten Sie Engines, Adapter, das SSR-Paket und das optionale MCP-Tool auf übereinstimmenden Release-Versionen; die untenstehenden @1-Befehle wählen die aktuelle stabile v1-Release aus.

Paket-Index

pnpm add @sixtyfold/line@1

npm install @sixtyfold/stock@1

Fügen Sie optionale Pakete nur bei Bedarf hinzu:

pnpm add @sixtyfold/themes@1 @sixtyfold/ssr@1

Framework‑Adapter sind separate Pakete. Installieren Sie einen Adapter und nur die Chart‑Engine, die von dieser Anwendung verwendet wird:

# React line chart — stock is not installed
pnpm add @sixtyfold/react@1 @sixtyfold/line@1

# Vue stock chart — line is not installed
pnpm add @sixtyfold/vue@1 @sixtyfold/stock@1

Dasselbe Muster ist über @sixtyfold/angular, @sixtyfold/svelte und @sixtyfold/solid verfügbar. Importieren Sie deren /line- oder /stock-Einstiegspunkt. Siehe Framework adapters für Lifecycle-, SSR‑ und Typed‑Array‑Beispiele.

Optionales MCP‑Entwicklertool

@sixtyfold/mcp ist ein separater lokaler Prozess für KI-Entwicklungswerkzeuge. Er kann die exakt versionierte API inspizieren, das kleinstmögliche Paketset empfehlen, Framework-Integrationen generieren, Chart-Optionen prüfen und bei der Diagnose von Rendering- oder Performance-Problemen helfen.

{
  "mcpServers": {
    "sixtyfold": {
      "command": "npx",
      "args": ["-y", "@sixtyfold/mcp@1"]
    }
  }
}

Er ist keine Chart-Abhängigkeit, gelangt nicht ins Browser-Bundle und ist nicht erforderlich, um Sixtyfold zu nutzen. Siehe MCP server für die vollständige Referenz zu Werkzeug, Datenschutz und Verifikation.

Minimales Liniendiagramm

Geben Sie dem Canvas eine konkrete CSS-Größe. Sixtyfold beobachtet das Element und ermittelt die Backing-Store-Größe unter Berücksichtigung des aktiven Device-Pixel-Ratio.

<canvas id="chart" style="display:block;width:100%;height:420px"></canvas>

import { LineChart } from "@sixtyfold/line";

const canvas = document.querySelector<HTMLCanvasElement>("#chart");
if (!canvas) throw new Error("Chart canvas was not found");

const chart = new LineChart(canvas, {
  renderMode: "auto",
  axis: { bottom: { format: "time" } },
  series: [{ name: "Temperature", unit: { suffix: " °C", decimals: 1 } }],
});

await chart.initialize();
chart.setData({
  x: new Float64Array([1711929600000, 1711933200000, 1711936800000]),
  y: new Float64Array([12.4, 13.1, 12.8]),
  length: 3,
});

Bundler und Sicherheitsrichtlinie

Die Konstruktion von Workern verwendet eine von dem Paket ausgegebene ESM-Worker-URL. Lassen Sie den Bundler Paketimporte verarbeiten, anstatt kompilierte Dateien in ein öffentliches Verzeichnis zu kopieren. Eine Content-Security-Policy muss Same-Origin-Worker über worker-src 'self' erlauben; wenn dies nicht der Fall ist, fällt renderMode: "auto" auf den Hauptthread zurück.

Der Anwendungs-Builder von Angular ist die Ausnahme: Fügen Sie das dist/assets-Verzeichnis des Line- oder Stock-Pakets zur assets-Konfiguration der Anwendung hinzu. Die genaue Konfiguration ist in Framework adapters dargestellt.

Sixtyfold lädt Schriftarten, Analytics, Themes, Daten oder andere Netzwerkressourcen nicht automatisch. Ausgenommen sind Overlay-Bilder per URL, da die aufrufende Stelle deren URLs ausdrücklich bereitstellt.

Bereinigung

chart.destroy();

Verwenden Sie ein zerstörtes Diagramm nicht erneut. Erstellen Sie eine neue Instanz, wenn Sie ein neues Canvas anhängen.