Installation

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

Index des paquets

pnpm add @sixtyfold/line@next

npm install @sixtyfold/stock@next

Ajoutez les paquets optionnels uniquement si nécessaire :

pnpm add @sixtyfold/themes@next @sixtyfold/ssr@next

Les adaptateurs de framework sont des paquets séparés. Installez un adaptateur et seulement le moteur de graphique utilisé par cette application :

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

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

Le même schéma est disponible via @sixtyfold/angular, @sixtyfold/svelte et @sixtyfold/solid. Importez leur point d’entrée /line ou /stock. Voir Adaptateurs de framework pour le cycle de vie, le SSR et des exemples de typed-array.

Outil développeur MCP optionnel

@sixtyfold/mcp est un processus local séparé pour les outils de codage IA. Il peut inspecter l’API versionnée exacte, recommander l’ensemble de paquets le plus léger, 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@next"]
    }
  }
}

Ce n’est pas une dépendance de graphique, n’entre pas dans le bundle navigateur et n’est pas requis pour utiliser Sixtyfold. Voir serveur MCP pour la référence complète de l’outil, de la confidentialité et de 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 device-pixel ratio actif.

<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 du worker utilise une URL ESM worker émise par le paquet. Laissez le bundler traiter les imports de paquets au lieu de copier des 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" revient au thread principal.

L’outil de construction d’applications d’Angular est l’exception : ajoutez le répertoire dist/assets packagé de Line ou Stock à la configuration assets de l’application. La configuration exacte est montrée dans Adaptateurs de framework.

Sixtyfold ne charge pas automatiquement des polices, analytics, thèmes, données ou autres ressources réseau. Les images de superposition basées sur des URL font exception car l’appelant fournit explicitement leurs URLs.

Nettoyage

chart.destroy();

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