GALERIE / TOUS LES EXEMPLES SUR CETTE PAGE

Deux bibliothèques. Une discipline de rendu.

Parcourez d’abord l’index complet, puis concentrez la galerie sur un package. Les graphiques et le code coloré ne s’activent qu’à proximité du viewport ; les charges synthétiques massives attendent un lancement explicite.

INDEX / TOUS LES EXEMPLES EN UN COUP D’ŒIL

Sachez ce qui existe avant de lancer un graphique.

Tous les titres, volumes et types de rendu sont visibles dans ce tableau compact. Ouvrez un exemple ou isolez une bibliothèque.

@sixtyfold/line

Sixtyfold Line Charts

@sixtyfold/stock

Sixtyfold Stock Charts

@sixtyfold/line

Sixtyfold Line Charts

11EXEMPLES EN DIRECT

Séries temporelles, lignes, marches, plages, colonnes signées, aires empilées, streaming et LOD pour plusieurs millions de points.

L01DATA@sixtyfold/line

Un million de minutes de courant d’alimentation

Une archive électrique de deux ans fidèle à la source passe d’une première image de 4 196 points aux quatre canaux de courant et à chaque lacune explicite.

Le graphique démarre près du viewport

1,052,640lignes d’une minute

Source: FeederBW feeder_001
Licence: CC BY 4.0

step linesParquetstaged hydrationgaps

Fiche source Texte de licence

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 million de minutes de courant d’alimentation" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Courant apparent L1", type: "step-after", unit: { suffix: " A" } },
    { name: "Courant apparent L2", type: "step-after", unit: { suffix: " A" } },
    { name: "Courant apparent L3", type: "step-after", unit: { suffix: " A" } },
    { name: "Courant apparent 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

Enveloppe météo sur 200 sites

Le champ horaire officiel devient une bande min–max dérivée de la source, la moyenne arithmétique du réseau et la température du départ sélectionné.

Le graphique démarre près du viewport

3,508,800observations source

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

range bandmean200 locationshourly UTC

Fiche source Texte de licence

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: "Enveloppe météo sur 200 sites" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Min.–max. de 200 emplacements", type: "range", width: 0,
      band: { fill: 0.18, borderWidth: 0 } },
    { name: "Moyenne de 200 emplacements", type: "line" },
    { name: "Température du départ 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

Vingt millions de valeurs de séries mixtes

Six signaux générés dans le navigateur combinent lignes, deux alignements en escalier, plages, barres et niveau de prix dans une vue Canvas2D exécutée par un worker.

Le graphique démarre près du viewport

20,000,000valeurs sur ordinateur

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: "Vingt millions de valeurs de séries mixtes" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Signal A (Cœur)", type: "line" },
    { name: "Signal B (Barres)", type: "bar" },
    { name: "Signal C (Escalier)", type: "step-after" },
    { name: "Signal D (Bande d’intervalle)", type: "range" },
    { name: "Signal E (Escalier centré)", type: "step-mid" },
    { name: "Signal F (Prix)", 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 millions de valeurs télémétriques d’un centre de données IA

Une trace d’incident synthétique de 1,5 million d’instants suit l’utilisation de calcul, la pression HBM, la marge thermique et le taux de limitation sur une même chronologie opérationnelle.

Le graphique démarre près du viewport

6,000,000valeurs de télémétrie sur ordinateur

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 millions de valeurs télémétriques d’un centre de données IA" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Utilisation de calcul", type: "line", width: 2,
      unit: { suffix: " %" } },
    { name: "Pression HBM", type: "line", width: 1.6,
      unit: { suffix: " %" } },
    { name: "Marge thermique", type: "line", width: 1.4,
      unit: { suffix: " %" } },
    { name: "Taux de limitation", 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

Huit millions de valeurs dans un pipeline d’inférence Transformer

Deux millions d’intervalles synthétiques de cinq millisecondes décomposent la latence de service en attente, prefill, transfert du cache KV et décodage de jetons, en gardant visible un goulot croissant de l’échelle de la flotte à une requête.

Le graphique démarre près du viewport

8,000,000valeurs de latence sur ordinateur

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: "Huit millions de valeurs dans un pipeline d’inférence Transformer" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Attente", 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: "Transfert du cache KV", type: "stacked-area",
      stack: { fill: 0.6 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "Décodage de jetons", 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

Dix millions d’échantillons d’une matrice d’électrodes neuronales

Huit canaux synthétiques non cliniques à 30 kHz préservent l’activité en rafales et les pics biphasiques sur 1,25 million d’instants par canal ; les tracés sont décalés verticalement pour les comparer.

Le graphique démarre près du viewport

10,000,000valeurs d’électrode sur ordinateur

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: "Dix millions d’échantillons d’une matrice d’électrodes neuronales" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Électrode 1", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Électrode 2", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Électrode 3", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Électrode 4", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Électrode 5", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Électrode 6", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Électrode 7", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "Électrode 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

Plusieurs lignes sur un même axe temporel

Trois signaux d’échelles différentes illustrent les coordonnées temporelles partagées, l’interpolation spline, la légende interactive, le réticule et les infobulles.

Le graphique démarre près du viewport

120,000échantillons par série

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: "Plusieurs lignes sur un même axe temporel" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Principale", type: "line", width: 1.8 },
    { name: "Secondaire", type: "line", width: 1.4 },
    { name: "Référence", 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

Résidus bidirectionnels et limites de contrôle

Cinquante mille résidus signés partent d’une base zéro tandis que les limites supérieure et inférieure en escalier évoluent sur le même axe temporel.

Le graphique démarre près du viewport

50,000résidus signés

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: "Résidus bidirectionnels et limites de contrôle" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Résidu", type: "bar",
      bar: { baseline: 0, widthRatio: 0.82 } },
    { name: "Limite haute", type: "step-mid", width: 1.4 },
    { name: "Limite basse", 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

Quatre aires cumulées empilées

Quatre séries positives utilisent une géométrie cumulative et une pyramide partagée afin que la réduction ne modifie jamais la composition de la pile.

Le graphique démarre près du viewport

36,000échantillons par couche

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: "Quatre aires cumulées empilées" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Couche A", type: "stacked-area", stack: { fill: 0.72 } },
    { name: "Couche B", type: "stacked-area", stack: { fill: 0.66 } },
    { name: "Couche C", type: "stacked-area", stack: { fill: 0.6 } },
    { name: "Couche 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

Remplissages d’aire en couches et lumineux

Deux séries linéaires comparent les remplissages en couches et lumineux, tandis que le trait reste la valeur de référence.

Le graphique démarre près du viewport

64,000échantillons par série

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: "Remplissages d’aire en couches et lumineux" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "Remplissage en couches", type: "line", width: 2,
      fill: 0.3, fillEffect: "layered", fillToZero: true },
    { name: "Remplissage lumineux", 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

Légende interactive à huit séries

La légende sémantique masque et restaure chaque tracé sans copier ni remodeler le jeu de données transféré.

Le graphique démarre près du viewport

8séries indépendantes

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: "Légende interactive à huit séries" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      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

05EXEMPLES EN DIRECT

OHLCV spécialisé avec temps de marché, volume, indicateurs sur bougies brutes, profils, niveaux de prix et marqueurs.

S01MARKET@sixtyfold/stock

BTC/USDT exact : de l’archive au direct

Une charge explicite pour ordinateur télécharge l’archive Parquet verrouillée des bougies Binance d’une minute, décode toutes les bougies observées hors du thread principal, les complète via le relais Sixtyfold partagé et de même origine, puis interroge chaque minute clôturée. Aucune minute historique n’est synthétisée.

Le graphique démarre près du viewport

2017 → livehistorique exact observé

Source: Exact Binance Spot monthly archive plus Sixtyfold live relay
Base d’utilisation: Binance developer API-use guidance

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

Fiche source Guide d’utilisation de l’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 exact : de l’archive au direct" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Ouverture",
    "high": "Plus haut",
    "low": "Plus bas",
    "close": "Clôture",
    "change": "Variation",
    "changePercent": "Variation %",
    "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 rempli avec volume

Des bougies ordonnées et un panneau de volume indépendant agrègent des périodes OHLCV valides plutôt que des buckets de graphique linéaire.

Le graphique démarre près du viewport

18,000bougies générées

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: "OHLCV rempli avec volume" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Ouverture",
    "high": "Plus haut",
    "low": "Plus bas",
    "close": "Clôture",
    "change": "Variation",
    "changePercent": "Variation %",
    "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

Indicateurs techniques sur bougies brutes

SMA, EMA, bandes de Bollinger et VWAP à réinitialisation quotidienne sont calculés sur les bougies brutes avant l’échantillonnage de l’agrégation active.

Le graphique démarre près du viewport

4familles d’indicateurs

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: "Indicateurs techniques sur bougies brutes" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Ouverture",
    "high": "Plus haut",
    "low": "Plus bas",
    "close": "Clôture",
    "change": "Variation",
    "changePercent": "Variation %",
    "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

Profil de volume estimé sur la plage visible

Une estimation volume-prix dérivée des bougies répartit le volume OHLCV sur la plage bas–haut de chaque bougie. Elle suit la plage visible avec une agrégation bornée pour préserver les performances ; ce ne sont pas des transactions exactes par prix.

Le graphique démarre près du viewport

48lignes de prix

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: "Profil de volume estimé sur la plage visible" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Ouverture",
    "high": "Plus haut",
    "low": "Plus bas",
    "close": "Clôture",
    "change": "Variation",
    "changePercent": "Variation %",
    "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

Lignes de prix et marqueurs temporels

Les niveaux ancrés aux données et les marqueurs triés par horodatage restent filtrés, thématisés et synchronisés avec la navigation en temps de marché.

Le graphique démarre près du viewport

O(n)filtrage des marqueurs

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: "Lignes de prix et marqueurs temporels" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "fr-FR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "fr-FR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "Ouverture",
    "high": "Plus haut",
    "low": "Plus bas",
    "close": "Clôture",
    "change": "Variation",
    "changePercent": "Variation %",
    "volume": "Volume"
  },
  },
};

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

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

SUITE / CONSTRUIRE AVEC LA MÊME API

Chaque exemple utilise l’API publiée.

Aucun hook privé, aucune capture factice, aucun remodelage propre au framework. Consultez ensuite la référence complète.

Ouvrir la documentation