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@1 @sixtyfold/line@1

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 and prop-installation errors, 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.

Readiness means the initial props have been accepted, not that their first canvas frame has been painted. Imperative changes made in the ready callback are not overwritten by a deferred initial prop batch.

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.

A rejected reactive prop installation reports an error and withholds the initial ready notification. Supply corrected props to retry without remounting. Data already installed successfully is not transferred again when a later prop fails. This recovery does not apply to terminal renderer errors.

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.

React 19.2+ Activity can hide and reveal a chart without recreating its renderer or retransferring data. Prop installation and readiness/error notifications wait until reveal; stats and series-visibility callbacks are disconnected while hidden. The retained worker and buffers are released when the component is actually unmounted, including an unmount while hidden.

React disconnects the forwarded ref while hidden. A previously captured handle also returns null from .chart until reveal. React 18 and earlier React 19 releases destroy charts on unmount through passive cleanup, including charts hidden by a re-suspended Suspense boundary.

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.

Stats collection follows reactive listeners. A sole @stats.once listener disables collection after its first event; an ordinary @stats listener keeps it enabled. A consumed .once listener remains consumed for that component's lifetime.

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.

Stats collection is enabled only while an active subscriber can receive the stats output. It stops after the last subscriber unsubscribes, including take(1), and when the output completes, errors, or is closed.

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.