GALERÍA / TODOS LOS EJEMPLOS EN ESTA PÁGINA

Funciones de líneas y mercado, renderizadas en directo.

Cada tarjeta aísla una función concreta de la API. Revisa primero el índice completo y después céntrate en uno de los paquetes; los gráficos y el código resaltado solo se activan cerca del viewport, mientras las cargas sintéticas masivas esperan un inicio explícito.

ÍNDICE / TODOS LOS EJEMPLOS DE UN VISTAZO

Conoce el contenido antes de iniciar ningún gráfico.

Todos los títulos, cargas y familias de renderizado aparecen en este panel compacto. Abre directamente un ejemplo o aísla una biblioteca para mantener la página en reposo.

@sixtyfold/line

Gráficos de líneas Sixtyfold

@sixtyfold/stock

Gráficos de mercado Sixtyfold

@sixtyfold/line

Gráficos de líneas Sixtyfold

11EJEMPLOS EN DIRECTO

Series temporales con líneas, escalones, intervalos, columnas con signo, áreas apiladas, streaming y LOD con preservación de extremos para millones de puntos.

L01DATA@sixtyfold/line

Un millón de minutos de corriente del alimentador

Un archivo eléctrico de dos años fiel a la fuente pasa de un primer fotograma de 4196 puntos a los cuatro canales de corriente y todos los huecos explícitos.

El gráfico se inicia cerca del viewport

1,052,640filas de un minuto

Fuente: FeederBW feeder_001
Licencia: CC BY 4.0

step linesParquetstaged hydrationgaps

Registro de la fuente Texto de la licencia

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: "Un millón de minutos de corriente del alimentador" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Corriente aparente L1", type: "step-after", unit: { suffix: " A" } },
    { name: "Corriente aparente L2", type: "step-after", unit: { suffix: " A" } },
    { name: "Corriente aparente L3", type: "step-after", unit: { suffix: " A" } },
    { name: "Corriente aparente L/PEN", 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

Envolvente meteorológica de 200 ubicaciones

El campo horario oficial se convierte en una banda mín.–máx. derivada de la fuente, la media aritmética de la red y la temperatura del alimentador seleccionado.

El gráfico se inicia cerca del viewport

3,508,800observaciones de origen

Fuente: FeederBW ICON-D2 weather
Licencia: CC BY 4.0

range bandmean200 locationshourly UTC

Registro de la fuente Texto de la licencia

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: "Envolvente meteorológica de 200 ubicaciones" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Mín.–máx. de 200 ubicaciones", type: "range", width: 0,
      band: { fill: 0.18, borderWidth: 0 } },
    { name: "Media de 200 ubicaciones", type: "line" },
    { name: "Temperatura del alimentador 001", 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

Veinte millones de valores de series mixtas

Seis señales generadas en el navegador combinan líneas, dos alineaciones escalonadas, intervalos, barras y un nivel de precio en una vista Canvas2D respaldada por un worker.

El gráfico se inicia cerca del viewport

20,000,000valores en escritorio

Fuente: Deterministic in-browser generator
Licencia: 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: "Veinte millones de valores de series mixtas" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Señal A (Núcleo)", type: "line" },
    { name: "Señal B (Barras)", type: "bar" },
    { name: "Señal C (Escalón)", type: "step-after" },
    { name: "Señal D (Banda de intervalo)", type: "range" },
    { name: "Señal E (Escalón centrado)", type: "step-mid" },
    { name: "Señal F (Precio)", 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

Seis millones de valores de telemetría de un centro de datos de IA

Un incidente sintético de 1,5 millones de instantes sigue la utilización de cálculo, la presión de HBM, el margen térmico y la tasa de limitación en una línea temporal operativa común.

El gráfico se inicia cerca del viewport

6,000,000valores de telemetría en escritorio

Fuente: Deterministic synthetic AI accelerator telemetry
Licencia: 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: "Seis millones de valores de telemetría de un centro de datos de IA" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Utilización de cálculo", type: "line", width: 2,
      unit: { suffix: " %" } },
    { name: "Presión de HBM", type: "line", width: 1.6,
      unit: { suffix: " %" } },
    { name: "Margen térmico", type: "line", width: 1.4,
      unit: { suffix: " %" } },
    { name: "Tasa de limitación", 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

Ocho millones de valores en una canalización de inferencia Transformer

Dos millones de intervalos sintéticos de cinco milisegundos descomponen la latencia del servicio en cola, prefill, transferencia de caché KV y decodificación de tokens, manteniendo visible un cuello de botella creciente desde la escala de la flota hasta una solicitud.

El gráfico se inicia cerca del viewport

8,000,000valores de latencia en escritorio

Fuente: Deterministic synthetic transformer-serving trace
Licencia: 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: "Ocho millones de valores en una canalización de inferencia Transformer" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Cola", 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: "Transferencia de caché KV", type: "stacked-area",
      stack: { fill: 0.6 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "Decodificación de tokens", 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

Diez millones de muestras de una matriz de electrodos neuronales

Ocho canales sintéticos no clínicos a 30 kHz conservan actividad en ráfagas y picos bifásicos a lo largo de 1,25 millones de instantes por canal; las trazas se desplazan verticalmente para compararlas.

El gráfico se inicia cerca del viewport

10,000,000valores de electrodos en escritorio

Fuente: Deterministic synthetic non-clinical neural-array recording
Licencia: 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: "Diez millones de muestras de una matriz de electrodos neuronales" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Electrodo 1", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrodo 2", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrodo 3", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrodo 4", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrodo 5", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrodo 6", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrodo 7", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Electrodo 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

Varias líneas en un único eje temporal

Tres señales con escalas diferentes muestran coordenadas temporales compartidas, interpolación spline, una leyenda interactiva, mira y tooltips.

El gráfico se inicia cerca del viewport

120,000muestras por serie

Fuente: Deterministic waveform fixture
Licencia: 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: "Varias líneas en un único eje temporal" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Principal", type: "line", width: 1.8 },
    { name: "Secundaria", type: "line", width: 1.4 },
    { name: "Referencia", 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

Residuos bidireccionales y límites de control

Cincuenta mil residuos con signo crecen desde una línea base cero mientras los límites superior e inferior escalonados cambian en el mismo eje temporal.

El gráfico se inicia cerca del viewport

50,000residuos con signo

Fuente: Deterministic process-control fixture
Licencia: 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: "Residuos bidireccionales y límites de control" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Residuo", type: "bar",
      bar: { baseline: 0, widthRatio: 0.82 } },
    { name: "Límite superior", type: "step-mid", width: 1.4 },
    { name: "Límite inferior", 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

Cuatro áreas acumulativas apiladas

Cuatro series positivas usan geometría acumulativa y una pirámide compartida para que la reducción nunca cambie la composición de la pila.

El gráfico se inicia cerca del viewport

36,000muestras por capa

Fuente: Deterministic stacked-series fixture
Licencia: 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: "Cuatro áreas acumulativas apiladas" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Capa A", type: "stacked-area", stack: { fill: 0.72 } },
    { name: "Capa B", type: "stacked-area", stack: { fill: 0.66 } },
    { name: "Capa C", type: "stacked-area", stack: { fill: 0.6 } },
    { name: "Capa 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

Rellenos de área por capas y con brillo

Dos series de líneas comparan rellenos por capas y con brillo mientras el trazo conserva el valor de referencia.

El gráfico se inicia cerca del viewport

64,000muestras por serie

Fuente: Deterministic area-fill fixture
Licencia: 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: "Rellenos de área por capas y con brillo" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Relleno por capas", type: "line", width: 2,
      fill: 0.3, fillEffect: "layered", fillToZero: true },
    { name: "Relleno con brillo", 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

Leyenda interactiva para ocho series

La leyenda semántica oculta y restaura trazos individuales sin copiar ni remodelar el conjunto de datos transferido.

El gráfico se inicia cerca del viewport

8series independientes

Fuente: Deterministic multi-series fixture
Licencia: 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: "Leyenda interactiva para ocho series" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: Array.from({ length: 8 }, (_, index) => ({
    name: ["Serie 1","Serie 2","Serie 3","Serie 4","Serie 5","Serie 6","Serie 7","Serie 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

Gráficos de mercado Sixtyfold

05EJEMPLOS EN DIRECTO

Renderizado OHLCV específico con navegación por tiempo de mercado, volumen, indicadores sobre velas sin agregar, perfiles del intervalo visible, niveles de precio y marcadores de eventos.

S01MARKET@sixtyfold/stock

BTC/USDT exacto: del archivo al directo

Una carga explícita para escritorio descarga el archivo Parquet bloqueado con velas de un minuto de Binance, decodifica todas las velas observadas fuera del hilo principal, completa los datos mediante el relay compartido y de mismo origen de Sixtyfold y después consulta cada minuto cerrado. No se sintetiza ningún minuto histórico.

El gráfico se inicia cerca del viewport

2017 → livehistorial exacto observado

Fuente: Exact Binance Spot monthly archive plus Sixtyfold live relay
Base de uso: Binance developer API-use guidance

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

Registro de la fuente Guía de uso de la API

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: "BTC/USDT exacto: del archivo al directo" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Apertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Cierre",
    "change": "Cambio",
    "changePercent": "Cambio %",
    "volume": "Volumen"
  },
  },
};

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

OHLCV relleno con volumen

Velas ordenadas y un panel de volumen independiente agregan periodos OHLCV válidos en lugar de buckets de un gráfico de líneas.

El gráfico se inicia cerca del viewport

18,000velas generadas

Fuente: Deterministic OHLCV fixture
Licencia: 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: "OHLCV relleno con volumen" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Apertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Cierre",
    "change": "Cambio",
    "changePercent": "Cambio %",
    "volume": "Volumen"
  },
  },
  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

Indicadores técnicos sobre velas sin agregar

SMA, EMA, bandas de Bollinger y VWAP con reinicio diario se calculan sobre velas sin agregar antes de muestrearse en la agregación activa.

El gráfico se inicia cerca del viewport

4familias de indicadores

Fuente: Deterministic OHLCV fixture
Licencia: 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: "Indicadores técnicos sobre velas sin agregar" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Apertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Cierre",
    "change": "Cambio",
    "changePercent": "Cambio %",
    "volume": "Volumen"
  },
  },
};

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

Perfil de volumen estimado del intervalo visible

Una estimación de volumen por precio derivada de las velas distribuye el volumen OHLCV por el intervalo mínimo–máximo de cada vela. Sigue el intervalo visible y limita la agregación de origen para proteger el rendimiento a largo plazo; no representa operaciones exactas por precio.

El gráfico se inicia cerca del viewport

48filas de precio

Fuente: Deterministic OHLCV fixture
Licencia: 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: "Perfil de volumen estimado del intervalo visible" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Apertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Cierre",
    "change": "Cambio",
    "changePercent": "Cambio %",
    "volume": "Volumen"
  },
  },
};

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

Líneas de precio y marcadores temporales

Los niveles anclados a los datos y los marcadores ordenados por marca temporal permanecen filtrados, tematizados y sincronizados con la navegación por tiempo de mercado.

El gráfico se inicia cerca del viewport

O(n)filtrado de marcadores

Fuente: Deterministic OHLCV fixture
Licencia: 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: "Líneas de precio y marcadores temporales" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "es-ES",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "es-ES",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Apertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Cierre",
    "change": "Cambio",
    "changePercent": "Cambio %",
    "volume": "Volumen"
  },
  },
};

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

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

SIGUIENTE / CREA CON LA MISMA API

Todos los ejemplos usan la interfaz publicada.

Sin hooks privados, capturas que simulen gráficos ni remodelado de datos específico de cada framework. Continúa con la referencia completa de opciones e integración.

Abrir la documentación