Server-side rendering

@sixtyfold/ssr runs the same TypeScript renderer against a minimal server canvas. It does not import DOM canvas globals, create browser workers, or animate. Real Line and Stock PNG output is continuously verified in Node.js, Bun, and Deno.

Install the SSR package and a Canvas2D implementation appropriate to your runtime. The verified compatibility set uses @napi-rs/canvas, but Sixtyfold does not force it as a library dependency.

The generated reference lists the exact SSR functions, render options, and runtime-neutral canvas types.

pnpm add @sixtyfold/ssr@next @napi-rs/canvas

import { createCanvas } from "@napi-rs/canvas";
import { renderLineChartSSR } from "@sixtyfold/ssr";

const width = 1200;
const height = 630;
const canvas = createCanvas(width * 2, height * 2);

renderLineChartSSR(
  canvas,
  data,
  {
    animated: false,
    chartBackground: "#081018",
    series: [{ color: "#65d6ff", width: 2 }],
    axis: { bottom: { format: "time" } },
  },
  { width, height, dpr: 2 },
);

const png = await canvas.encode("png");

The canvas implementation owns image encoding.

Verified server runtimes

The compatibility suite currently pins these CI targets:

These are reproducible CI targets, not minimum-version claims. Each runtime renders deterministic Line and Stock fixtures without network access. The gate compares plot pixels with a pinned visual reference and requires every named label to produce visible ink at its exact layout anchor inside a bounded region; it also validates PNG signatures, dimensions, and encoded output. It does not pin font-dependent glyph widths or ink ratios. The PNGs are retained as inspectable CI artifacts. Before release, the Node visual reference is repeated on Ubuntu, macOS, and Windows.

Node.js and Bun run the same module directly:

node app.mjs
bun app.mjs

Deno requires a local node_modules tree and explicit permissions for the Node-API canvas addon:

deno run \
  --allow-read \
  --allow-env \
  --allow-ffi \
  --allow-sys=homedir \
  --node-modules-dir=manual \
  app.mjs

Add --allow-write=<output-directory> only when the application writes encoded images to disk. See the runtime verification source, Bun Node-API support, and Deno native-addon guidance.

Supported configuration

SSR accepts renderer-facing visual options: padding, direction, grid, axes, background, range selector, tooltip style, crosshair style, labels, overlays, line series/LOD, stock candles, indicators, volume profile, price lines, and markers. Browser-only callbacks, DOM controls, pointer interaction, and workers are intentionally absent.

Set animated: false for clarity even though static rendering completes immediately. Use the same width, height, and dpr contract in tests and production to prevent snapshot differences.

Runtime-neutral canvas injection

When a caller does not already own the canvas, supply createCanvas in SSRRenderOptions. It receives backing-store dimensions. The returned object needs width, height, and getContext("2d") with the Canvas2D methods used by the renderer.

Deterministic output

• Pin the canvas implementation and fonts in the rendering image.
• Pass an explicit font family if the server does not provide the browser stack.
• Avoid remote URL overlays during request rendering; resolve and cache assets before rendering.
• Keep input arrays, chart size, DPR, locale, time zone, and options stable.