Installation

Sixtyfold packages are ESM-only and published under the @sixtyfold npm scope. The Core, Line, and Stock browser runtimes have no third-party runtime dependencies; Line and Stock depend only on Core. Framework adapters declare the host framework as a peer dependency, SSR uses a Canvas2D implementation supplied by the application, and the optional MCP developer tool runs as a separate local process.

Package index

pnpm add @sixtyfold/line@next

npm install @sixtyfold/stock@next

Add optional packages only when needed:

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

Framework adapters are separate packages. Install one adapter and only the chart engine used by that 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

The same pattern is available through @sixtyfold/angular, @sixtyfold/svelte, and @sixtyfold/solid. Import their /line or /stock entry point. See Framework adapters for lifecycle, SSR, and typed-array examples.

Optional MCP developer tool

@sixtyfold/mcp is a separate local process for AI coding tools. It can inspect the exact versioned API, recommend the smallest package set, generate framework integrations, check chart options, and help diagnose rendering or performance issues.

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

It is not a chart dependency, does not enter the browser bundle, and is not required to use Sixtyfold. See MCP server for the complete tool, privacy, and verification reference.

Minimal line chart

Give the canvas a concrete CSS size. Sixtyfold observes the element and resolves the backing-store size with the active 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 and security policy

Worker construction uses an ESM worker URL emitted by the package. Let the bundler process package imports instead of copying compiled files into a public directory. A Content Security Policy must allow same-origin workers through worker-src 'self'; if it does not, renderMode: "auto" falls back to the main thread.

Angular's application builder is the exception: add the packaged line or stock dist/assets directory to the application's assets configuration. The exact configuration is shown in Framework adapters.

Sixtyfold does not load fonts, analytics, themes, data, or other network resources automatically. URL-based overlay images are the exception because the caller explicitly supplies their URLs.

Cleanup

chart.destroy();

Do not reuse a chart after destruction. Construct a new instance when attaching a new canvas.