CHART GALLERY / ALL EXAMPLES ON THIS PAGE

Line and stock features, rendered live.

Each card isolates a concrete API capability. Scan the complete index first, then focus on either package; charts and highlighted source activate only near the viewport, while massive synthetic workloads wait for an explicit launch.

INDEX / EVERY EXAMPLE AT A GLANCE

Know what is here before anything starts.

Every title, workload, and rendering family is visible in this compact switchboard. Open an example directly or isolate one library to keep the page quiet.

@sixtyfold/line

Sixtyfold Line Charts

@sixtyfold/stock

Sixtyfold Stock Charts

@sixtyfold/line

Sixtyfold Line Charts

11LIVE EXAMPLES

Time-series rendering for lines, steps, ranges, signed columns, stacked areas, streaming vectors, and extrema-preserving multi-million-point LOD.

L01DATA@sixtyfold/line

A million minutes of feeder current

A source-faithful two-year electrical archive moves from a 4,196-point first frame to all four current channels and every explicit gap.

Chart initializes near the viewport

1,052,640one-minute rows

Source: FeederBW feeder_001
Licence: CC BY 4.0

step linesParquetstaged hydrationgaps

Source record Licence text

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createFeederCurrentData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const feederCurrent = createFeederCurrentData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "A million minutes of feeder current" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "L1 apparent current", type: "step-after", unit: { suffix: " A" } },
    { name: "L2 apparent current", type: "step-after", unit: { suffix: " A" } },
    { name: "L3 apparent current", type: "step-after", unit: { suffix: " A" } },
    { name: "L/PEN apparent current", type: "step-after", unit: { suffix: " A" } },
  ],
  minViewportRange: 30 * 60_000,
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(feederCurrent);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L02DATA@sixtyfold/line

Weather envelope across 200 locations

The official hourly field becomes a source-derived min–max band, arithmetic network mean, and selected feeder temperature.

Chart initializes near the viewport

3,508,800source observations

Source: FeederBW ICON-D2 weather
Licence: CC BY 4.0

range bandmean200 locationshourly UTC

Source record Licence text

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createWeatherData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const weather = createWeatherData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Weather envelope across 200 locations" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "200-site min–max", type: "range", width: 0,
      band: { fill: 0.18, borderWidth: 0 } },
    { name: "200-site mean", type: "line" },
    { name: "Feeder 001 temperature", type: "line", width: 2 },
  ],
  lod: { mode: "adaptive", density: 0.25 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(weather);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L03SCALE@sixtyfold/line

Twenty million mixed-series values

Six browser-generated signals combine lines, two step timings, range data, bars, and a price level in one worker-backed Canvas2D view.

Chart initializes near the viewport

20,000,000desktop values

Source: Deterministic in-browser generator
Licence: Synthetic

≈3.33M × 6workermixed seriesadaptive LOD

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createGeneratedSignalsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const generatedSignals = createGeneratedSignalsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Twenty million mixed-series values" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Signal A (Core)", type: "line" },
    { name: "Signal B (Bars)", type: "bar" },
    { name: "Signal C (Step)", type: "step-after" },
    { name: "Signal D (Range band)", type: "range" },
    { name: "Signal E (Midpoint step)", type: "step-mid" },
    { name: "Signal F (Price)", type: "line" },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(generatedSignals);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L04SCALE@sixtyfold/line

Six million telemetry values from an AI datacenter

A synthetic 1.5-million-tick incident trace follows compute utilization, HBM pressure, thermal headroom, and throttle rate across one shared operational timeline.

Chart initializes near the viewport

6,000,000desktop telemetry values

Source: Deterministic synthetic AI accelerator telemetry
Licence: Synthetic

1.5M × 4accelerator fleetincident analysisadaptive LOD

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createAcceleratorTelemetryData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const acceleratorTelemetry = createAcceleratorTelemetryData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Six million telemetry values from an AI datacenter" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Compute utilization", type: "line", width: 2,
      unit: { suffix: " %" } },
    { name: "HBM pressure", type: "line", width: 1.6,
      unit: { suffix: " %" } },
    { name: "Thermal headroom", type: "line", width: 1.4,
      unit: { suffix: " %" } },
    { name: "Throttle rate", type: "step-after", width: 1.2,
      unit: { suffix: " %" } },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(acceleratorTelemetry);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L05SCALE@sixtyfold/line

Eight million values through a transformer inference pipeline

Two million synthetic five-millisecond intervals decompose serving latency into queueing, prefill, KV-cache transfer, and token decoding, keeping a growing bottleneck visible from fleet scale to one request.

Chart initializes near the viewport

8,000,000desktop latency values

Source: Deterministic synthetic transformer-serving trace
Licence: Synthetic

2M × 4inference latencystacked pipelineworker rendering

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createTransformerInferenceData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const transformerInference = createTransformerInferenceData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Eight million values through a transformer inference pipeline" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Queueing", type: "stacked-area",
      stack: { fill: 0.68 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "Prefill", type: "stacked-area",
      stack: { fill: 0.64 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "KV-cache transfer", type: "stacked-area",
      stack: { fill: 0.6 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "Token decode", type: "stacked-area",
      stack: { fill: 0.56 }, unit: { suffix: " ms", decimals: 1 } },
  ],
  lod: { mode: "pyramid", density: 0.75 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(transformerInference);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L06SCALE@sixtyfold/line

Ten million samples from a neural electrode array

Eight synthetic, non-clinical 30 kHz channels preserve bursting activity and biphasic spikes across 1.25 million timestamps per channel; traces are vertically offset for comparison.

Chart initializes near the viewport

10,000,000desktop electrode values

Source: Deterministic synthetic non-clinical neural-array recording
Licence: Synthetic

1.25M × 830 kHz arraybiphasic spikesinteractive legend

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createNeuralArrayData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const neuralArray = createNeuralArrayData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Ten million samples from a neural electrode array" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Electrode 1", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrode 2", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrode 3", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrode 4", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrode 5", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrode 6", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrode 7", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrode 8", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
  ],
  lod: { mode: "adaptive", density: 1 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(neuralArray);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L07DRAW@sixtyfold/line

Multiple lines on one time axis

Three differently scaled signals demonstrate shared time coordinates, spline interpolation, an interactive legend, crosshair, and tooltips.

Chart initializes near the viewport

120,000samples per series

Source: Deterministic waveform fixture
Licence: Synthetic

multi-linesplinetooltipslegend

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createWaveformsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const waveforms = createWaveformsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Multiple lines on one time axis" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Primary", type: "line", width: 1.8 },
    { name: "Secondary", type: "line", width: 1.4 },
    { name: "Reference", type: "line", width: 1 },
  ],
  interpolation: "spline",
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(waveforms);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L08DRAW@sixtyfold/line

Bidirectional residuals and control limits

Fifty thousand signed residuals grow from a zero baseline while stepped upper and lower limits change without leaving the shared time axis.

Chart initializes near the viewport

50,000signed residuals

Source: Deterministic process-control fixture
Licence: Synthetic

signed columnszero baselinecontrol limitsstep-mid

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createResidualsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const residuals = createResidualsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Bidirectional residuals and control limits" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Residual", type: "bar",
      bar: { baseline: 0, widthRatio: 0.82 } },
    { name: "Upper limit", type: "step-mid", width: 1.4 },
    { name: "Lower limit", type: "step-mid", width: 1.4 },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(residuals);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L09DRAW@sixtyfold/line

Four cumulative stacked areas

Four positive series use cumulative geometry and a shared pyramid so reduction never changes the composition of the stack.

Chart initializes near the viewport

36,000samples per layer

Source: Deterministic stacked-series fixture
Licence: Synthetic

stacked areafour layerspyramid LODcumulative

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createStackedValuesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const stackedValues = createStackedValuesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Four cumulative stacked areas" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Layer A", type: "stacked-area", stack: { fill: 0.72 } },
    { name: "Layer B", type: "stacked-area", stack: { fill: 0.66 } },
    { name: "Layer C", type: "stacked-area", stack: { fill: 0.6 } },
    { name: "Layer D", type: "stacked-area", stack: { fill: 0.54 } },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(stackedValues);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L10DRAW@sixtyfold/line

Layered and glow area fills

Two line series compare layered and glow fills while the line stroke remains the authoritative value.

Chart initializes near the viewport

64,000samples per series

Source: Deterministic area-fill fixture
Licence: Synthetic

area fillgradientglowfill-to-zero

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createFilledSeriesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const filledSeries = createFilledSeriesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Layered and glow area fills" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Layered fill", type: "line", width: 2,
      fill: 0.3, fillEffect: "layered", fillToZero: true },
    { name: "Glow fill", type: "line", width: 1.2,
      fill: 0.16, fillEffect: "glow" },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(filledSeries);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L11DRAW@sixtyfold/line

Eight-series interactive legend

The semantic legend hides and restores individual traces without copying or reshaping the transferred dataset.

Chart initializes near the viewport

8independent series

Source: Deterministic multi-series fixture
Licence: Synthetic

interactive legendvisibility APIeight seriescallbacks

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createEightSeriesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const eightSeries = createEightSeriesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  rangeSelector: { visible: true },

  labels: { top: { text: "Eight-series interactive legend" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: Array.from({ length: 8 }, (_, index) => ({
    name: ["Series 1","Series 2","Series 3","Series 4","Series 5","Series 6","Series 7","Series 8"][index],
    type: "line",
    width: index < 3 ? 1.8 : 1,
  })),
  legend: {
    visible: true,
    interactive: true,
    allowHideAll: false,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(eightSeries);
chart.setSeriesVisibilityCallback(({ visibility }) => {
  console.log("Visible series", visibility);
});

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/stock

Sixtyfold Stock Charts

05LIVE EXAMPLES

Purpose-built OHLCV rendering with market-time navigation, volume, raw-candle indicators, visible-range profiles, price levels, and event markers.

S01MARKET@sixtyfold/stock

Exact BTC/USDT from archive to live

An explicit desktop workload downloads the locked Binance one-minute Parquet archive, decodes every observed candle off the main thread, catches up through Sixtyfold’s shared same-origin relay, and then polls each closed minute. No historical minutes are synthesized.

Chart initializes near the viewport

2017 → liveexact observed history

Source: Exact Binance Spot monthly archive plus Sixtyfold live relay
Usage basis: Binance developer API-use guidance

measured Parquet downloadobserved 1m candlesexact catch-upminute-boundary polling

Source record API use guidance

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";

import {
  exactArchiveEnd,
  loadExactBtcArchive,
  prepareBinanceLiveFeed,
} from "./same-origin-market-relay";

const canvas = document.querySelector("canvas")!;

const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "continuous",
  showVolume: true,
  labels: {
    top: { text: "Exact BTC/USDT from archive to live" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Open",
    "high": "High",
    "low": "Low",
    "close": "Close",
    "change": "Change",
    "changePercent": "Change %",
    "volume": "Volume"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();

const feed = prepareBinanceLiveFeed({
  symbol: "BTCUSDT",
  afterTimestamp: exactArchiveEnd,
  relayMode: "archive-tail",
  streamEnabled: false,
  onCandles: ({ timestamp, open, high, low, close, volume }) =>
    chart.addCandles(timestamp, open, high, low, close, volume),
});
void Promise.all([
  loadExactBtcArchive(),
  feed.ready,
]).then(([archive, bootstrap]) => {
  chart.initStreaming(5_800_000);
  chart.addCandleBatches(
    [archive, bootstrap.columns],
    { initialTimeRange: "6M" },
  );
  feed.start();
});
window.addEventListener("pagehide", () => feed.close(), { once: true });

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S02MARKET@sixtyfold/stock

Filled OHLCV with volume

Ordered candles and an independent volume pane aggregate through valid OHLCV periods instead of line-chart buckets.

Chart initializes near the viewport

18,000generated candles

Source: Deterministic OHLCV fixture
Licence: Synthetic

filled candlesvolumeOHLCV LODhost-owned ranges

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "Filled OHLCV with volume" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Open",
    "high": "High",
    "low": "Low",
    "close": "Close",
    "change": "Change",
    "changePercent": "Change %",
    "volume": "Volume"
  },
  },
  candleStyle: "filled",
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S03MARKET@sixtyfold/stock

Raw-candle technical indicators

SMA, EMA, Bollinger Bands, and daily-reset VWAP calculate from raw candles before sampling at the active aggregation.

Chart initializes near the viewport

4indicator families

Source: Deterministic OHLCV fixture
Licence: Synthetic

SMAEMABollingerVWAP

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "Raw-candle technical indicators" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Open",
    "high": "High",
    "low": "Low",
    "close": "Close",
    "change": "Change",
    "changePercent": "Change %",
    "volume": "Volume"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setIndicators([
  { type: "sma", id: "sma-20", label: "SMA 20", period: 20 },
  { type: "ema", id: "ema-50", label: "EMA 50", period: 50 },
  { type: "bollinger", id: "bb-20", label: "BB 20", period: 20, deviation: 2 },
  { type: "vwap", id: "vwap-day", label: "VWAP", reset: "day" },
]);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S04MARKET@sixtyfold/stock

Estimated visible-range volume profile

A candle-derived price-by-volume estimate distributes OHLCV volume across each candle’s low–high range. It follows the visible range while bounded source aggregation protects long-range performance; it is not exact trades-at-price data.

Chart initializes near the viewport

48price rows

Source: Deterministic OHLCV fixture
Licence: Synthetic

estimated volume profilevalue areavisible rangeOHLCV

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "Estimated visible-range volume profile" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Open",
    "high": "High",
    "low": "Low",
    "close": "Close",
    "change": "Change",
    "changePercent": "Change %",
    "volume": "Volume"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setVolumeProfile({
  rows: 48,
  placement: "right",
  valueAreaPercent: 70,
});
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S05MARKET@sixtyfold/stock

Price lines and timestamp markers

Data-anchored levels and timestamp-sorted markers remain culled, themed, and synchronized with market-time navigation.

Chart initializes near the viewport

O(n)marker culling

Source: Deterministic OHLCV fixture
Licence: Synthetic

price linesevent markersmarket timebinary culling

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "Price lines and timestamp markers" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "en-US",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "en-US",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Open",
    "high": "High",
    "low": "Low",
    "close": "Close",
    "change": "Change",
    "changePercent": "Change %",
    "volume": "Volume"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setPriceLines([
  { id: "entry", price: 182.4, label: "Entry", showAxisLabel: true },
  { id: "risk", price: 174.8, label: "Risk", showAxisLabel: true },
]);
chart.setMarkers([
  { id: "release", timestamp: ohlcv.timestamp[Math.floor(ohlcv.length * 0.72)],
    position: "above",
    shape: "diamond", label: "R" },
]);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

NEXT / BUILD WITH THE SAME API

Every example uses the published surface.

No private renderer hooks, screenshot stand-ins, or framework-specific data reshaping. Continue with the complete options and integration reference.

Open documentation