GALERIA / TODOS OS EXEMPLOS NESTA PÁGINA

Duas bibliotecas. Uma disciplina de renderização.

Consulte primeiro o índice completo e concentre a galeria num dos pacotes. Os gráficos e o código destacado só são ativados perto do viewport; as cargas sintéticas massivas aguardam um início explícito.

ÍNDICE / TODOS OS EXEMPLOS NUM RELANCE

Saiba o que existe antes de iniciar qualquer gráfico.

Todos os títulos, cargas e famílias de renderização aparecem neste painel compacto. Abra um exemplo ou isole uma biblioteca.

@sixtyfold/line

Sixtyfold Line Charts

@sixtyfold/stock

Sixtyfold Stock Charts

@sixtyfold/line

Sixtyfold Line Charts

11EXEMPLOS AO VIVO

Séries temporais com linhas, degraus, intervalos, colunas com sinal, áreas empilhadas, streaming e LOD para milhões de pontos.

L01DATA@sixtyfold/line

Um milhão de minutos de corrente do alimentador

Um arquivo elétrico de dois anos, fiel à fonte, passa de um primeiro quadro com 4 196 pontos para os quatro canais de corrente e todas as falhas explícitas.

O gráfico inicia perto do viewport

1,052,640linhas de um minuto

Fonte: FeederBW feeder_001
Licença: CC BY 4.0

step linesParquetstaged hydrationgaps

Registo da fonte Texto da licença

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: "Um milhão de minutos de corrente do alimentador" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Corrente aparente L1", type: "step-after", unit: { suffix: " A" } },
    { name: "Corrente aparente L2", type: "step-after", unit: { suffix: " A" } },
    { name: "Corrente aparente L3", type: "step-after", unit: { suffix: " A" } },
    { name: "Corrente 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

Envelope meteorológico em 200 locais

O campo horário oficial torna-se uma banda mín.–máx. derivada da fonte, a média aritmética da rede e a temperatura do alimentador selecionado.

O gráfico inicia perto do viewport

3,508,800observações de origem

Fonte: FeederBW ICON-D2 weather
Licença: CC BY 4.0

range bandmean200 locationshourly UTC

Registo da fonte Texto da licença

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: "Envelope meteorológico em 200 locais" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Mín.–máx. de 200 locais", type: "range", width: 0,
      band: { fill: 0.18, borderWidth: 0 } },
    { name: "Média de 200 locais", type: "line" },
    { name: "Temperatura do 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

Vinte milhões de valores de séries mistas

Seis sinais gerados no browser combinam linhas, dois alinhamentos em degrau, intervalos, barras e um nível de preço numa vista Canvas2D suportada por worker.

O gráfico inicia perto do viewport

20,000,000valores no desktop

Fonte: Deterministic in-browser generator
Licença: 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: "Vinte milhões de valores de séries mistas" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Sinal A (Núcleo)", type: "line" },
    { name: "Sinal B (Barras)", type: "bar" },
    { name: "Sinal C (Degrau)", type: "step-after" },
    { name: "Sinal D (Banda de intervalo)", type: "range" },
    { name: "Sinal E (Degrau centrado)", type: "step-mid" },
    { name: "Sinal F (Preço)", 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 milhões de valores de telemetria de um centro de dados de IA

Um incidente sintético com 1,5 milhões de instantes acompanha utilização computacional, pressão da HBM, margem térmica e taxa de limitação numa linha temporal operacional comum.

O gráfico inicia perto do viewport

6,000,000valores de telemetria no desktop

Fonte: Deterministic synthetic AI accelerator telemetry
Licença: 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 milhões de valores de telemetria de um centro de dados de IA" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Utilização computacional", type: "line", width: 2,
      unit: { suffix: " %" } },
    { name: "Pressão da HBM", type: "line", width: 1.6,
      unit: { suffix: " %" } },
    { name: "Margem térmica", type: "line", width: 1.4,
      unit: { suffix: " %" } },
    { name: "Taxa de limitação", 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

Oito milhões de valores num pipeline de inferência Transformer

Dois milhões de intervalos sintéticos de cinco milissegundos decompõem a latência de serviço em fila, prefill, transferência da cache KV e descodificação de tokens, mantendo visível um congestionamento progressivo da escala da frota até um único pedido.

O gráfico inicia perto do viewport

8,000,000valores de latência no desktop

Fonte: Deterministic synthetic transformer-serving trace
Licença: 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: "Oito milhões de valores num pipeline de inferência Transformer" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Fila", 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: "Transferência da cache KV", type: "stacked-area",
      stack: { fill: 0.6 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "Descodificação 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

Dez milhões de amostras de uma matriz de elétrodos neurais

Oito canais sintéticos, não clínicos, a 30 kHz preservam atividade em rajadas e picos bifásicos ao longo de 1,25 milhões de instantes por canal; os traços são deslocados verticalmente para comparação.

O gráfico inicia perto do viewport

10,000,000valores de elétrodo no desktop

Fonte: Deterministic synthetic non-clinical neural-array recording
Licença: 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: "Dez milhões de amostras de uma matriz de elétrodos neurais" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Elétrodo 1", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elétrodo 2", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elétrodo 3", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elétrodo 4", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elétrodo 5", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elétrodo 6", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elétrodo 7", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Elétrodo 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

Várias linhas num único eixo temporal

Três sinais com escalas diferentes demonstram coordenadas temporais partilhadas, interpolação spline, legenda interativa, mira e dicas.

O gráfico inicia perto do viewport

120,000amostras por série

Fonte: Deterministic waveform fixture
Licença: 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: "Várias linhas num único eixo temporal" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Principal", type: "line", width: 1.8 },
    { name: "Secundária", type: "line", width: 1.4 },
    { name: "Referência", 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

Resíduos bidirecionais e limites de controlo

Cinquenta mil resíduos com sinal crescem a partir de uma base zero, enquanto os limites superior e inferior em degrau mudam no mesmo eixo temporal.

O gráfico inicia perto do viewport

50,000resíduos com sinal

Fonte: Deterministic process-control fixture
Licença: 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: "Resíduos bidirecionais e limites de controlo" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Resíduo", type: "bar",
      bar: { baseline: 0, widthRatio: 0.82 } },
    { name: "Limite superior", type: "step-mid", width: 1.4 },
    { name: "Limite 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

Quatro áreas acumuladas empilhadas

Quatro séries positivas usam geometria acumulada e uma pirâmide partilhada para que a redução nunca altere a composição da pilha.

O gráfico inicia perto do viewport

36,000amostras por camada

Fonte: Deterministic stacked-series fixture
Licença: 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: "Quatro áreas acumuladas empilhadas" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Camada A", type: "stacked-area", stack: { fill: 0.72 } },
    { name: "Camada B", type: "stacked-area", stack: { fill: 0.66 } },
    { name: "Camada C", type: "stacked-area", stack: { fill: 0.6 } },
    { name: "Camada 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

Preenchimentos de área em camadas e com brilho

Duas séries de linha comparam preenchimentos em camadas e com brilho, mantendo o traço como valor autoritativo.

O gráfico inicia perto do viewport

64,000amostras por série

Fonte: Deterministic area-fill fixture
Licença: 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: "Preenchimentos de área em camadas e com brilho" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Preenchimento em camadas", type: "line", width: 2,
      fill: 0.3, fillEffect: "layered", fillToZero: true },
    { name: "Preenchimento luminoso", 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

Legenda interativa para oito séries

A legenda semântica oculta e repõe traços individuais sem copiar nem remodelar o conjunto de dados transferido.

O gráfico inicia perto do viewport

8séries independentes

Fonte: Deterministic multi-series fixture
Licença: 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: "Legenda interativa para oito séries" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: Array.from({ length: 8 }, (_, index) => ({
    name: ["Série 1","Série 2","Série 3","Série 4","Série 5","Série 6","Série 7","Série 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

05EXEMPLOS AO VIVO

OHLCV especializado com tempo de mercado, volume, indicadores sobre velas brutas, perfis, níveis de preço e marcadores.

S01MARKET@sixtyfold/stock

BTC/USDT exato: do arquivo ao direto

Uma carga explícita para desktop transfere o arquivo Parquet bloqueado com velas de um minuto da Binance, descodifica todas as velas observadas fora da thread principal, atualiza-as através do relay partilhado e de mesma origem da Sixtyfold e passa a consultar cada minuto fechado. Nenhum minuto histórico é sintetizado.

O gráfico inicia perto do viewport

2017 → livehistórico exato observado

Fonte: Exact Binance Spot monthly archive plus Sixtyfold live relay
Base de utilização: Binance developer API-use guidance

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

Registo da fonte Orientação de utilização da 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 exato: do arquivo ao direto" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Abertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Fecho",
    "change": "Variação",
    "changePercent": "Variação %",
    "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

OHLCV preenchido com volume

Velas ordenadas e um painel de volume independente agregam períodos OHLCV válidos, em vez de usar buckets de gráfico de linhas.

O gráfico inicia perto do viewport

18,000velas geradas

Fonte: Deterministic OHLCV fixture
Licença: 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 preenchido com volume" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Abertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Fecho",
    "change": "Variação",
    "changePercent": "Variação %",
    "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

Indicadores técnicos sobre velas brutas

SMA, EMA, bandas de Bollinger e VWAP com reposição diária são calculados sobre velas brutas antes da amostragem na agregação ativa.

O gráfico inicia perto do viewport

4famílias de indicadores

Fonte: Deterministic OHLCV fixture
Licença: 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 brutas" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Abertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Fecho",
    "change": "Variação",
    "changePercent": "Variação %",
    "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

Perfil de volume estimado no intervalo visível

Uma estimativa de volume por preço derivada das velas distribui o volume OHLCV pelo intervalo mínimo–máximo de cada vela. Segue a área visível com agregação limitada para proteger o desempenho; não representa transações exatas por preço.

O gráfico inicia perto do viewport

48linhas de preço

Fonte: Deterministic OHLCV fixture
Licença: 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 volume estimado no intervalo visível" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Abertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Fecho",
    "change": "Variação",
    "changePercent": "Variação %",
    "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

Linhas de preço e marcadores temporais

Níveis ancorados nos dados e marcadores ordenados por timestamp permanecem filtrados, tematizados e sincronizados com a navegação em tempo de mercado.

O gráfico inicia perto do viewport

O(n)filtragem de marcadores

Fonte: Deterministic OHLCV fixture
Licença: 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: "Linhas de preço e marcadores temporais" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "pt-PT",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "pt-PT",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Abertura",
    "high": "Máximo",
    "low": "Mínimo",
    "close": "Fecho",
    "change": "Variação",
    "changePercent": "Variação %",
    "volume": "Volume"
  },
  },
};

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: "Risco", 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 });

SEGUINTE / CONSTRUA COM A MESMA API

Cada exemplo usa a API publicada.

Sem hooks privados, imagens a fingir gráficos ou remodelação de dados por framework. Continue na referência completa.

Abrir documentação