Live example groups

Each documentation example pairs an interactive chart with synchronized, read-only, copyable TypeScript. Examples use curated datasets so the documentation remains responsive on mobile; the engineering workbench demonstrates maximal data volumes.

Level-of-detail (LOD) calibration

LOD means level of detail. The interactive group below shows how a large dataset is reduced to the detail the current screen can display. It exposes density, rebaseRatio, and quantizationStep; keep their defaults unless a measured workload needs tuning.

Runtime appearance

The examples follow the theme selected on this website. The stable default API identifier selects Midnight. See Themes for the current dark and light presets and selector setup. Use the Line API and Stock API for exact options and members; the line, stock, rendering, streaming, and SSR guides provide task-focused examples.

Example lifecycle contract

The preview destroys its chart when the route or locale changes. It uses a curated main-thread dataset so it remains responsive on mobile; the anonymous engineering workbench is the place for multi-million-point worker demonstrations.

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

const preset = getThemePreset("default");
const chart = new LineChart(canvas, {
  ...preset.line.appearance,
  renderMode: "main",
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.12,
    quantizationStep: 0.10,
  },
});

await chart.initialize();
chart.setMultiSeriesData(data);
chart.updateAppearance(preset.line.appearance);
preset.line.series.forEach((series, index) => {
  chart.updateSeriesAppearance(index, series);
});