Gráficas de acciones

import { StockChart, type TimeRange } from "@sixtyfold/stock";

const data = {
  timestamp: new Float64Array([0, 60_000, 120_000, 180_000]),
  open: new Float64Array([100, 102, 101, 104]),
  high: new Float64Array([103, 104, 105, 107]),
  low: new Float64Array([99, 100, 100, 103]),
  close: new Float64Array([102, 101, 104, 106]),
  volume: new Float64Array([420, 510, 470, 630]),
  length: 4,
};

const canvas = document.querySelector<HTMLCanvasElement>("#chart")!;
const chart = new StockChart(canvas, {
  renderMode: "auto",
  timeScale: "market",
  showVolume: true,
  priceUnit: { prefix: "$", decimals: 2 },
});

await chart.initialize();
chart.setData(data);

// The application owns the controls: choose any labels and ranges, or none.
const controls = document.querySelector("#stock-ranges")!;
for (const range of ["1D", "1M", "ALL"] as const satisfies readonly TimeRange[]) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = range;
  button.addEventListener("click", () => chart.setTimeRange(range));
  controls.append(button);
}


window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/stock representa columnas ordenadas de open, high, low, close y volume (OHLCV) con capas analíticas específicas del mercado. Su proceso de level-of-detail (LOD) combina automáticamente muchas velas visibles en periodos OHLCV válidos y luego vuelve a velas más finas al hacer zoom.

La configuración exacta y las firmas de los métodos se encuentran en la referencia generada Stock options, StockChart methods, y OHLCV data types.

StockChart expone métodos de lifecycle, viewport, appearance, overlay, renderer y batching directamente. En el modo market-time, sus métodos de viewport preservan coordenadas de sesión-observada comprimidas mientras los valores públicos permanecen como marcas de tiempo reales.

Velas y volumen

Elija filled, hollow o ohlc para la geometría de las velas. candleColors controla los cuerpos y mechas alcistas y bajistas. El volumen tiene colores, opacidad y proporción de altura de panel independientes.

Los límites del renderer muestran la precisión para tooltips OHLCV y callbacks del crosshair. Proporcione priceUnit y volumeUnit cuando la aplicación requiera formato explícito de moneda, unidad, decimales o compacto.

Rangos temporales gestionados por el host

StockChart no crea ni estiliza botones de rango temporal. La aplicación anfitriona posee las etiquetas, número, orden, disposición y accesibilidad de sus controles—o puede no renderizar ningún control.

Llame a setTimeRange() cuando un botón corresponda a uno de los presets de conveniencia exportados: 1D, 5D, 1M, 3M, 6M, YTD, 1Y, 5Y o ALL. Un preset que se extienda más allá del historial cargado se ajusta (clampa) a los datos disponibles.

const controls = document.querySelector<HTMLElement>("[data-stock-ranges]")!;
const ranges = [
  ["Day", "1D"],
  ["Six months", "6M"],
  ["Everything", "ALL"],
] as const;

for (const [label, range] of ranges) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = label;
  button.dataset.range = range;
  button.addEventListener("click", () => chart.setTimeRange(range));
  controls.append(button);
}

canvas.addEventListener("sixtyfold:time-range-change", (event) => {
  const detail = (event as CustomEvent).detail;
  for (const button of controls.querySelectorAll("button")) {
    button.setAttribute(
      "aria-pressed",
      String(button.dataset.range === detail.range),
    );
  }
});

Para un rango que no sea un preset nombrado, envíe marcas de tiempo reales a través de la API ordinaria de viewport:

const twoWeeks = 14 * 24 * 60 * 60_000;
let latestDataTimestamp = 0;

const chart = new StockChart(canvas, {
  onVisibleRangeChange({ dataBounds }) {
    latestDataTimestamp = dataBounds.xMax;
  },
});

customButton.addEventListener("click", () => {
  chart.setViewport({
    xMin: latestDataTimestamp - twoWeeks,
    xMax: latestDataTimestamp,
  });
});

En el modo market time-scale, los valores públicos del viewport permanecen como marcas de tiempo reales; el gráfico los convierte internamente a coordenadas de sesión-observada comprimidas. Los callbacks del constructor proporcionan onTimeRangeChange, onCrosshairMove y onVisibleRangeChange. Se exportan constantes de eventos DOM con nombres de espacio para esos mismos cambios de estado.

Indicadores

Los indicadores integrados se calculan a partir de velas sin procesar y se muestrean en la agregación activa para el renderizado y los valores del crosshair.

chart.setIndicators([
  { type: "sma", id: "sma-20", period: 20, color: "#ffd166" },
  { type: "ema", id: "ema-50", period: 50, color: "#64d8ff" },
  { type: "bollinger", id: "bb-20", period: 20, deviation: 2 },
  { type: "vwap", id: "vwap-day", reset: "day" },
]);

Funciones puras están disponibles en @sixtyfold/stock/analytics: calculateSMA, calculateEMA, calculateBollingerBands, calculateVWAP y computeStockIndicator. Valores fuente no finitos rompen una ventana rodante en lugar de interpolarse silenciosamente.

Capas de mercado

chart.setVolumeProfile({ rows: 48, placement: "right", valueAreaPercent: 70 });
chart.setPriceLines([
  { id: "entry", price: 182.4, label: "Entry", showAxisLabel: true },
]);
chart.setMarkers([
  { id: "earnings", timestamp, position: "above", shape: "diamond", label: "E" },
]);

El perfil de volumen es un histograma estimado de volumen-por-precio, no una reconstrucción de flujo de órdenes trade-a-trade. Divide la escala de precio visible en filas y distribuye el volumen de cada vela OHLCV uniformemente a lo largo del rango low-to-high reportado por esa vela. Las barras horizontales más anchas representan más volumen estimado alrededor de un precio. Las porciones alcistas y bajistas usan la dirección de la vela, el punto de control marca la fila con mayor volumen estimado y el área de valor se expande mediante filas adyacentes hasta contener el porcentaje configurado del volumen visible.

El perfil sigue el rango de tiempo y precio visible. Rangos largos usan la agregación de vela completada más fina que mantiene el cálculo en o por debajo de 4.096 velas fuente; rangos muy ampliados usan velas crudas. Esto mantiene la interacción acotada, pero ambos caminos siguen siendo aproximaciones derivadas de velas porque los datos OHLCV no informan dónde dentro del rango de cada vela ocurrieron operaciones individuales. No describa esta capa como operaciones exactas-por-precio, footprint, o datos de flujo de órdenes.

Las líneas de precio son niveles horizontales anclados a datos. Los marcadores se ordenan por marca de tiempo y se recortan al rango visible; use eventos escasos en lugar de un marcador por vela.

Streaming

chart.initStreaming(250_000);
chart.addCandle(timestamp, open, high, low, close, volume);

Para feeds columnarios, use addCandles o addCandleBatches. initialTimeRange puede aplicarse en la misma pasada del renderer que un lote inicial transferido, evitando un frame de rango completo antes de que aparezca el viewport previsto.

Las jerarquías de agregación en streaming se reconstruyen fuera de pantalla y reemplazan la jerarquía activa de forma atómica. La jerarquía anterior permanece visible hasta que el reemplazo está listo.

Carga de CSV

loadOHLCVFromCSV se proporciona para conjuntos de datos sencillos en navegador, con un callback de progreso opcional. Para Parquet muy grandes o feeds propietarios, decodifique fuera del hilo de UI y transfiera seis columnas tipadas validadas directamente.