Installation

Les paquets Sixtyfold sont ESM-only et publiés sous le scope npm @sixtyfold. Les runtimes navigateur Core, Line et Stock n’ont pas de dépendances runtime tierces ; Line et Stock dépendent uniquement de Core. Les adaptateurs de framework déclarent le framework hôte comme dépendance peer, le SSR utilise une implémentation Canvas2D fournie par l’application, et l’outil développeur optionnel MCP s’exécute comme un processus local séparé.

La version stable actuelle est 1.0.2, publiée le 1er novembre 2026. Elle corrige le problème rendant les graphiques worker Line et Stock indisponibles dans Firefox 159 après des changements de visibilité ou de focus. Il n’y a pas de modifications publiques d’API. Consultez les notes de publication 1.0.2 et les contrats de streaming lors de la mise à niveau. Maintenez les engines, les adaptateurs, le paquet SSR et l’outil MCP optionnel sur des versions de publication correspondantes ; les commandes @1 ci‑dessous sélectionnent la release v1 stable actuelle.

Index des paquets

pnpm add @sixtyfold/line@1

npm install @sixtyfold/stock@1

Ajoutez les packages optionnels uniquement si nécessaire :

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

Les adaptateurs de framework sont des packages distincts. Installez un adaptateur et uniquement le moteur de graphiques utilisé par cette application :

# 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

Le même schéma est disponible via @sixtyfold/angular, @sixtyfold/svelte et @sixtyfold/solid. Importez leur point d’entrée /line ou /stock. Consultez Framework adapters pour des exemples de cycle de vie, SSR et tableaux typés.

Outil développeur MCP optionnel

@sixtyfold/mcp est un processus local séparé pour les outils d’aide à la programmation par IA. Il peut inspecter l’API versionnée exacte, recommander l’ensemble minimal de paquets, générer des intégrations de framework, vérifier les options de graphique et aider à diagnostiquer des problèmes de rendu ou de performance.

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

Il ne s’agit pas d’une dépendance de graphiques, n’entre pas dans le bundle du navigateur et n’est pas requis pour utiliser Sixtyfold. Voir MCP server pour la référence complète sur l’outil, la confidentialité et la vérification.

Graphique linéaire minimal

Donnez au canvas une taille CSS concrète. Sixtyfold observe l’élément et résout la taille du backing-store avec le ratio de pixels actif de l’appareil.

<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 et politique de sécurité

La construction des workers utilise une URL ESM de worker émise par le paquet. Laissez le bundler traiter les imports du paquet au lieu de copier les fichiers compilés dans un répertoire public. Une Content Security Policy doit autoriser les workers same‑origin via worker-src 'self' ; si ce n’est pas le cas, renderMode: "auto" se rabat sur le thread principal.

L’outil de build d’Angular fait exception : ajoutez le répertoire dist/assets du paquet Line ou Stock à la configuration assets de l’application. La configuration exacte est montrée dans Framework adapters.

Sixtyfold Charts ne charge pas automatiquement les polices, outils d’analyse, thèmes, données ou autres ressources réseau. Les images de superposition basées sur une URL font exception parce que l’appelant fournit explicitement leurs URL.

Nettoyage

chart.destroy();

Ne réutilisez pas un graphique après destruction. Créez une nouvelle instance lors de l’attachement d’un nouveau canvas.