Instalación

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

Índice de paquetes

pnpm add @sixtyfold/line@next

npm install @sixtyfold/stock@next

Añade paquetes opcionales solo cuando sean necesarios:

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

Los adaptadores de framework son paquetes separados. Instala un adaptador y solo el motor de gráficos usado por esa aplicación:

# 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

El mismo patrón está disponible a través de @sixtyfold/angular, @sixtyfold/svelte y @sixtyfold/solid. Importa su punto de entrada /line o /stock. Consulta Framework adapters para ejemplos de ciclo de vida, SSR y typed-array.

Herramienta de desarrollo MCP opcional

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

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

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

Gráfico de línea mínimo

Asigna un tamaño CSS concreto al canvas. Sixtyfold observa el elemento y resuelve el tamaño del backing-store con la device-pixel ratio 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,
});

Bundler y política de seguridad

La construcción del worker usa una URL de worker ESM emitida por el paquete. Deja que el bundler procese las importaciones del paquete en lugar de copiar archivos compilados a un directorio público. Una Content Security Policy debe permitir workers same-origin mediante worker-src 'self'; si no lo hace, renderMode: "auto" recurre al main thread.

El builder de aplicaciones de Angular es la excepción: añade el directorio empaquetado line o stock dist/assets a la configuración assets de la aplicación. La configuración exacta se muestra en Framework adapters.

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

Limpieza

chart.destroy();

No reutilices un gráfico tras su destrucción. Construye una nueva instancia al adjuntar un nuevo canvas.