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 do Core. Os adaptadores de frameworks declaram o framework hospedeiro 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.

A versão estável atual é 1.0.2, publicada a 1 de novembro de 2026. Corrige a indisponibilidade dos gráficos worker Line e Stock no Firefox 159 após alterações de visibilidade ou foco. Não existem alterações na API pública. Reveja as notas de lançamento 1.0.2 e os contratos de streaming ao atualizar. Mantenha engines, adaptadores, pacote SSR e a ferramenta MCP opcional em versões correspondentes; os comandos @1 abaixo seleccionam a versão v1 estável atual.

Índice do pacote

pnpm add @sixtyfold/line@1

npm install @sixtyfold/stock@1

Adicione pacotes opcionais apenas quando necessário:

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

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

# 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

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. Consulte Framework adapters para exemplos de ciclo de vida, SSR e arrays tipados.

Ferramenta de desenvolvimento MCP opcional

@sixtyfold/mcp é um processo local independente para ferramentas de programação assistida por IA. Pode inspecionar a API versionada exacta, recomendar o conjunto mínimo de pacotes, gerar integrações para frameworks, verificar opções de gráfico e ajudar a diagnosticar problemas de renderização ou desempenho.

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

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

Gráfico de linhas minimalista

Atribua um tamanho CSS concreto ao canvas. O Sixtyfold observa o elemento e resolve o tamanho do backing-store com a ratio de píxeis do 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,
});

Bundler e política de segurança

A construção do worker usa uma URL ESM de worker emitida pelo pacote. Permita que o bundler processe importações do pacote 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'; caso contrário, renderMode: "auto" recorre ao thread principal.

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

A Sixtyfold não carrega automaticamente fontes, análises, temas, dados ou outros recursos de rede. As imagens sobrepostas baseadas em URL são a exceção porque o chamador fornece explicitamente os respetivos 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.