Framework adapters

Sixtyfold's framework packages are thin lifecycle adapters around the same LineChart and StockChart engines. They do not duplicate rendering logic, reshape data, add runtime telemetry, or pull every chart into your application.

Install one adapter plus the engine you use. Import only its /line or /stock entry point:

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

import { SixtyfoldLineChart } from "@sixtyfold/react/line";

Replace react with vue, angular, svelte, or solid. For a stock chart, install @sixtyfold/stock and import /stock. Chart engines are optional peer dependencies of the adapter, so installing a line chart does not install stock.

Shared adapter contract

All adapters create the chart after the component mounts, wait for initialize(), apply reactive inputs, and call destroy() on unmount. This also terminates a chart worker and releases observers, listeners, and large buffer references. During SSR the component emits only its canvas host; use @sixtyfold/ssr when the server must paint chart pixels.

Every adapter reports readiness, construction, renderer, and overlay errors, plus render statistics. Line adapters also report SeriesVisibilityChangeEvent. Each framework exposes the underlying LineChart or StockChart instance through its conventional ref or component API, so uncommon imperative operations remain available.

Handle chart failures

Adapter error hooks accept unknown because JavaScript construction errors are not required to use a particular class. Failures emitted by the Sixtyfold renderer are ChartRendererError instances. Overlay resolution or renderer-delivery failures are ChartOverlayError instances. Narrow the value before reading structured fields:

import {
  ChartOverlayError,
  ChartRendererError,
} from "@sixtyfold/line";

export function reportChartError(error: unknown) {
  if (error instanceof ChartRendererError) {
    console.error(error.phase, error.message);
    return;
  }
  if (error instanceof ChartOverlayError) {
    console.error("Overlay sources failed:", error.sources);
    return;
  }
  console.error(error);
}

Use the same import from @sixtyfold/stock in a stock-only application. error.phase is either "initialization" or "runtime". A renderer failure destroys that chart instance; remount the adapter if the application chooses to recover. An overlay failure is non-fatal: successful items remain installed; if every requested item fails, the previously rendered overlay remains.

Bulk typed arrays transfer to the worker. Treat each data object as one-shot: do not mutate it in place, and assign a fresh object with fresh buffers for each update. This preserves the zero-copy path for multi-million-point datasets.

React

import { useMemo, useRef } from "react";
import {
  SixtyfoldLineChart,
  type LineChartHandle,
} from "@sixtyfold/react/line";

export function Signals() {
  const chartRef = useRef<LineChartHandle>(null);
  const data = useMemo(() => ({
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  }), []);

  return (
    <SixtyfoldLineChart
      ref={chartRef}
      data={data}
      aria-label="Signal history"
      onError={console.error}
    />
  );
}

The component accepts ordinary canvas attributes. Its ref exposes ref.current?.chart. Initial construction is microtask-deferred so React Strict Mode's development lifecycle probe cannot transfer the initial data twice.

Vue

<script setup lang="ts">
import { shallowRef } from "vue";
import { SixtyfoldLineChart } from "@sixtyfold/vue/line";

const data = shallowRef({
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
});
</script>

<template>
  <SixtyfoldLineChart
    :data="data"
    aria-label="Signal history"
    @error="console.error"
  />
</template>

Use shallowRef or markRaw for bulk data instead of Vue deep proxies. The component emits ready, error, and stats; line charts also emit seriesVisibilityChange. A template ref exposes its shallow chart ref.

Angular

The Angular 20–22 package uses standalone components and Angular Package Format secondary entry points.

import { Component } from "@angular/core";
import { SixtyfoldLineChartComponent } from "@sixtyfold/angular/line";

@Component({
  standalone: true,
  imports: [SixtyfoldLineChartComponent],
  template: `
    <sixtyfold-line-chart
      [data]="data"
      ariaLabel="Signal history"
      (chartError)="reportError($event)"
    />
  `,
})
export class Signals {
  data = {
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  };

  reportError(error: unknown) {
    console.error(error);
  }
}

Inputs follow the shared table plus focused accessibility fields and canvasAttributes. Outputs are chartReady, chartError, and stats; the line component also emits seriesVisibilityChange. A component reference exposes its public chart.

Angular's application builder does not transform package-owned Vite worker URLs. Add the engines used by the application to the build target's assets array in angular.json:

[
  { "glob": "**/*", "input": "node_modules/@sixtyfold/line/dist/assets", "output": "assets" },
  { "glob": "**/*", "input": "node_modules/@sixtyfold/stock/dist/assets", "output": "assets" }
]

Chart construction is guarded with isPlatformBrowser, so Angular SSR does not touch browser globals.

Svelte

<script lang="ts">
  import LineChart from "@sixtyfold/svelte/line";

  const data = {
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  };
</script>

<LineChart
  {data}
  ariaLabel="Signal history"
  onError={console.error}
/>

chart is bindable for imperative access. Additional Svelte props are onReady, onError, onStats, onSeriesVisibilityChange for line charts, canvasClass, canvasStyle, and ariaLabel.

SolidJS

import { SixtyfoldLineChart } from "@sixtyfold/solid/line";

const data = {
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
};

export function Signals() {
  return (
    <SixtyfoldLineChart
      data={data}
      canvasProps={{ "aria-label": "Signal history" }}
      chartRef={(chart) => console.log(chart)}
      onError={console.error}
    />
  );
}

chartRef receives the mounted chart and later null during cleanup. canvasProps passes native canvas attributes. All other props follow the shared contract.

Complete examples

The public repository includes a minimal responsive application for each supported framework. Each application shows the packages, data shape, chart setup, and cleanup needed to reproduce both a line and a stock chart.