Instalação

Os pacotes Sixtyfold são apenas ESM e publicados sob o escopo npm @sixtyfold. Os runtimes de navegador Core, Line e Stock não têm dependências de runtime de terceiros; Line e Stock dependem apenas de Core. Os adaptadores de framework declaram o framework anfitrião como dependência peer, o SSR utiliza uma implementação Canvas2D fornecida pela aplicação, e a ferramenta de desenvolvimento opcional MCP corre como um processo local separado.

Índice de pacotes

pnpm add @sixtyfold/line@next

npm install @sixtyfold/stock@next

Adicione pacotes opcionais apenas quando necessário:

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

Os adaptadores de framework são pacotes separados. Instale um adaptador e apenas o motor de gráficos usado por essa aplicação:

# 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

O mesmo padrão está disponível através de @sixtyfold/angular, @sixtyfold/svelte, e @sixtyfold/solid. Importe o seu ponto de entrada /line ou /stock. Veja Framework adapters para exemplos de ciclo de vida, SSR e typed-array.

Ferramenta MCP de desenvolvimento opcional

@sixtyfold/mcp é um processo local separado para ferramentas de codificação AI. Pode inspecionar a API versionada exata, recomendar o conjunto mínimo de pacotes, gerar integrações de framework, verificar opções de gráfico e ajudar a diagnosticar problemas de renderização ou desempenho.

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

Não é uma dependência de gráfico, não entra no bundle do navegador e não é necessário para usar Sixtyfold. Veja MCP server para a referência completa da ferramenta, privacidade e verificação.

Gráfico de linha mínimo

Dê ao canvas um tamanho CSS concreto. O Sixtyfold observa o elemento e resolve o tamanho do backing-store com a rasterização ativa do dispositivo (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 e política de segurança

A construção de workers usa uma URL de worker ESM emitida pelo pacote. Permita que o bundler processe importações de pacotes em vez de copiar ficheiros compilados para um diretório público. Uma Content Security Policy deve permitir workers da mesma origem através de worker-src 'self'; se não o fizer, renderMode: "auto" recai para o thread principal.

O construtor de aplicações do Angular é a exceção: adicione o diretório empacotado line ou stock dist/assets à configuração assets da aplicação. A configuração exata é mostrada em Framework adapters.

O Sixtyfold não carrega fontes, analytics, temas, dados ou outros recursos de rede automaticamente. As imagens de sobreposição por URL são a exceção porque o chamador fornece explicitamente os seus URLs.

Limpeza

chart.destroy();

Não reutilize um gráfico após a destruição. Construa uma nova instância ao anexar um novo canvas.