Instalación

Los paquetes de Sixtyfold son solo ESM y se publican bajo el ámbito npm @sixtyfold. Los runtimes de navegador Core, Line y Stock no tienen dependencias de runtime de terceros; Line y Stock dependen solo de Core. Los adaptadores de framework declaran el framework anfitrión como dependencia peer, la SSR usa una implementación Canvas2D suministrada por la aplicación, y la herramienta de desarrollo opcional MCP se ejecuta como un proceso local separado.

La versión estable actual es 1.0.2, publicada el 1 de noviembre de 2026. Corrige que los gráficos worker de Line y Stock quedaran inaccesibles en Firefox 159 tras cambios de visibilidad o foco. No hay cambios en la API pública. Revise las notas de la versión 1.0.2 y los contratos de streaming al actualizar. Mantenga los engines, adaptadores, paquete SSR y la herramienta opcional MCP en versiones coincidentes; los comandos @1 abajo seleccionan la versión estable v1 actual.

Índice del paquete

pnpm add @sixtyfold/line@1

npm install @sixtyfold/stock@1

Añada paquetes opcionales solo cuando sean necesarios:

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

Los adaptadores de framework son paquetes separados. Instale un adaptador y solo el motor de gráficos que use esa aplicación:

# 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

El mismo patrón está disponible a través de @sixtyfold/angular, @sixtyfold/svelte y @sixtyfold/solid. Importe su punto de entrada /line o /stock. Consulte Framework adapters para ejemplos de ciclo de vida, SSR y arrays tipados.

Herramienta de desarrollo MCP opcional

@sixtyfold/mcp es un proceso local separado para herramientas de codificación con IA. Puede inspeccionar la API versionada exacta, recomendar el conjunto mínimo de paquetes, generar integraciones con frameworks, comprobar opciones de gráfico y ayudar a diagnosticar problemas de renderizado o rendimiento.

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

No es una dependencia de gráficos, no entra en el bundle del navegador y no es necesario para usar Sixtyfold. Consulte MCP server para la referencia completa sobre la herramienta, privacidad y verificación.

Gráfico de líneas mínimo

Asigne un tamaño CSS concreto al canvas. Sixtyfold observa el elemento y resuelve el tamaño del backing-store con la relación de píxeles del dispositivo activa.

<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,
});

Empaquetador y política de seguridad

La construcción de workers utiliza una URL ESM para worker emitida por el paquete. Deje que el empaquetador procese las importaciones del paquete en lugar de copiar archivos compilados a un directorio público. Una Política de Seguridad de Contenidos debe permitir workers del mismo origen a través de worker-src 'self'; si no lo permite, renderMode: "auto" recurrirá al hilo principal.

El generador de aplicaciones de Angular es la excepción: añada el directorio dist/assets del paquete Line o Stock a la configuración assets de la aplicación. La configuración exacta se muestra en Framework adapters.

Sixtyfold no carga fuentes, análisis, temas, datos u otros recursos de red automáticamente. Las imágenes superpuestas basadas en URL son la excepción porque el llamante proporciona explícitamente sus URL.

Limpieza

chart.destroy();

No reutilice un gráfico tras su destrucción. Construya una nueva instancia al adjuntar un nuevo lienzo.