Sixtyfold Components

High-performance TypeScript components for AI, observability, industrial IoT, and financial markets.

Charts

20M data points in one interactive chart. See the live demo →

Line

Stock

Level of detail

Sixtyfold Charts began with an idea borrowed from 3D games: if a renderer changes an object's level of detail (LOD) as its distance from the camera changes, could a chart change its data detail as the user zooms?

The line renderer precalculates extrema-preserving summaries at exponentially increasing bucket sizes and selects a screen-appropriate level for the current viewport. Finer detail returns as the user zooms in; coarser summaries bound the work when zoomed out while retaining important peaks and gaps. These summaries are rendered on demand rather than stored as pre-rendered images. Stock charts apply the same principle through OHLCV aggregation levels selected for the visible time range.

Available packages

Package	Purpose
@sixtyfold/core	Shared Canvas2D runtime and interaction primitives
@sixtyfold/line	Dense time-series and multi-series line charts
@sixtyfold/stock	OHLCV, candlestick, and market analytics charts
@sixtyfold/ssr	Server-side Canvas2D rendering for line and stock charts in Node.js, Bun, and Deno
@sixtyfold/themes	Immutable chart appearance presets
@sixtyfold/react	React line and stock chart adapters
@sixtyfold/vue	Vue line and stock chart adapters
@sixtyfold/angular	Angular standalone line and stock chart components
@sixtyfold/svelte	Svelte line and stock chart components
@sixtyfold/solid	SolidJS line and stock chart adapters
@sixtyfold/mcp	Local, read-only MCP guidance for packages, APIs, examples, and performance

Installing @sixtyfold/line never installs @sixtyfold/stock or a framework adapter. Framework packages expose separate /line and /stock entry points and declare chart engines as optional peers, so applications add only the engine and adapter they use. Themes follow the same boundary through @sixtyfold/themes/line and @sixtyfold/themes/stock; either entry point works without installing the other renderer.

Until the stable 1.0.0 release, install the release candidate through npm's next channel. For example, a React line-chart application installs:

pnpm add @sixtyfold/line@next @sixtyfold/react@next

MCP

Coding agents can connect to the independently installed MCP developer tool without adding anything to the application bundle:

• Codex: codex mcp add sixtyfold -- npx -y @sixtyfold/mcp@next
• Claude Code: claude mcp add sixtyfold -- npx -y @sixtyfold/mcp@next
• Gemini CLI: gemini mcp add --scope user sixtyfold npx -y @sixtyfold/mcp@next

Other MCP hosts can use the equivalent JSON configuration:

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

The local server is read-only, contains its versioned API catalog, makes no network requests, and never becomes a dependency of a chart package.

Example

import { LineChart } from "@sixtyfold/line";

function createSignals(count = 1_000_000) {
  const x = new Float64Array(count);
  const throughput = new Float64Array(count);
  const tailLatency = new Float64Array(count);

  for (let index = 0; index < count; index++) {
    x[index] = Date.UTC(2026, 0, 1) + index * 1_000;
    throughput[index] = 42_000 + Math.sin(index / 4_000) * 8_000;
    tailLatency[index] = 38 + Math.sin(index / 1_100) * 7 + Math.sin(index / 29_000) * 12;
  }

  return {
    x,
    series: [throughput, tailLatency],
    length: count,
    seriesCount: 2,
  };
}

const chart = new LineChart(document.querySelector("canvas")!, {
  renderMode: "worker",
  series: [{ name: "Throughput" }, { name: "p99 latency" }],
});

await chart.initialize();
chart.setMultiSeriesData(createSignals());

This sends two million generated series values to the chart. Worker rendering transfers the typed-array buffers, so generate fresh arrays before installing the same workload into another chart.

See sixtyfold.dev for product documentation, live examples, commercial licensing, and support.

Development

This is a pnpm monorepo, but the monorepo is a source-management boundary—not a consumer installation unit.

Run the complete local release verification with:

pnpm install
pnpm run predeploy

predeploy regenerates the MCP guidance and API catalog before running the complete type, test, package, example, and clean-consumer release checks.

To run an individual gate while diagnosing a failure:

pnpm run build
pnpm run typecheck
pnpm run test:unit
pnpm run check:mcp-catalog
pnpm run check:examples
pnpm run check:package-release

check:package-release packs every npm package and installs the tarballs into clean browser, framework-type, worker, tree-shaking, and server-runtime SSR consumers. Real Canvas2D PNG output is also verified in pinned Node.js, Bun, and Deno CI environments. check:examples builds and opens the React, Vue, Angular, Svelte, and SolidJS examples in Chromium and requires both chart workers to become ready without console errors or external network requests. See examples/.

Report suspected vulnerabilities privately as described in SECURITY.md.

Licensing

Sixtyfold Components is source-available under the PolyForm Noncommercial License 1.0.0. Noncommercial use is permitted under those terms. Commercial use requires a separate license—see sixtyfold.dev for details.

License scope

Using an AI coding assistant, agent, generator, translator, obfuscator, or refactoring tool does not change the applicable license. Generated or rewritten output that reproduces, modifies, embeds, calls, or otherwise incorporates Sixtyfold code remains subject to that license to the extent provided by contract and law. Renaming symbols or changing formatting and structure does not by itself grant commercial-use or redistribution rights.

Code developed independently without using or reproducing Sixtyfold code is not covered by these terms. If you are unsure whether your intended use requires a commercial license, contact us through sixtyfold.dev.

Contributions require acceptance of the Sixtyfold Contributor License Agreement, which permits accepted contributions to be used in both public noncommercial and commercial editions. See CONTRIBUTING.md.