株式チャート

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 は市場固有の分析レイヤーを備えた順序付けされた始値・高値・安値・終値・出来高（OHLCV）列をレンダリングします。詳細度（LOD）プロセスは表示中の多数のローソクを自動的に有効なOHLCV期間に結合し、ズームするとより細かいローソクに戻ります。

正確な構成とメソッド署名は生成済みの Stock options、StockChart methods、および OHLCV data types 参照に記載されています。

StockChart はライフサイクル、ビューポート、外観、オーバーレイ、レンダラー、およびバッチ処理のメソッドを直接公開します。マーケット時間モードでは、そのビューポートメソッドは圧縮された観測セッション座標を保持しつつ、公開値は実際のタイムスタンプのままになります。

ローソクと出来高

filled、hollow、またはohlcのローソク形状を選択してください。candleColors は強気・弱気のボディとウィックを制御します。出来高は独立した色、不透明度、ペイン高さ比率を持ちます。

レンダラーの境界はOHLCVツールチップとクロスヘアコールバックの表示精度を決定します。アプリケーションが明示的な通貨、単位、小数、または省略表記でのフォーマットを必要とする場合はpriceUnitとvolumeUnitを指定してください。

ホスト所有の時間範囲

StockChart は時間範囲ボタンを生成したりスタイルしたりしません。ラベル、数、順序、レイアウト、アクセシビリティはホストアプリケーションが所有するか、あるいは全くコントロールを表示しないこともできます。

ボタンがエクスポートされた便宜プリセットのいずれかに対応する場合はsetTimeRange()を呼び出してください：1D、5D、1M、3M、6M、YTD、1Y、5Y、またはALL。読み込まれた履歴を超えるプリセットは利用可能なデータにクランプされます。

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

名前付きプリセットでない範囲の場合は、通常のビューポートAPIを通じて実際のタイムスタンプを送信してください：

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

market タイムスケールモードでは、公開ビューポート値は実際のタイムスタンプのままです；チャートは内部でそれらを圧縮された観測セッション座標に変換します。コンストラクタコールバックは onTimeRangeChange、onCrosshairMove、および onVisibleRangeChange を提供します。同じ状態変化に対する名前空間付きDOMイベント定数もエクスポートされます。

インディケーター

組み込みインディケーターは生ローソクから計算され、レンダリングおよびクロスヘア値にはアクティブな集約でサンプリングされます。

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

純関数は@sixtyfold/stock/analyticsから利用可能です：calculateSMA、calculateEMA、calculateBollingerBands、calculateVWAP、およびcomputeStockIndicator。非有限のソース値はロールウィンドウを壊し、黙って補間されることはありません。

マーケットレイヤー

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

ボリュームプロファイルは取引ごとのオーダーフロー再構築ではなく、推定された価格別出来高ヒストグラムです。可視の価格スケールを行に分割し、各OHLCVローソクの出来高をそのローソクが報告する安値から高値の範囲に均等に分配します。水平方向に太いバーは特定価格付近での推定出来高が多いことを示します。強気・弱気の部分はローソクの方向を用い、コントロールポイントは最も推定出来高の多い行を示し、バリューエリアは隣接行を拡張して設定された可視出来高の割合を含むまで広がります。

プロファイルは可視の時間範囲と価格範囲に追随します。長い範囲では計算を4,096ソースローソク以下に保つ最も細かい完了済みローソク集約を使用し、ズームインした範囲では生ローソクを使用します。これにより操作が制限されますが、どちらの経路もOHLCVデータが各ローソク内で個々の取引がどこで発生したかを報告しないためローソク由来の近似であり続けます。このレイヤーを正確な価格帯での取引（trades-at-price）、フットプリント、またはオーダーフローのデータと表現しないでください。

価格ラインはデータに固定された水平レベルです。マーカーはタイムスタンプでソートされ可視範囲に間引かれます；各ローソクごとに一つのマーカーを置くのではなく疎なイベントを使用してください。

ストリーミング

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

列状フィードにはaddCandlesまたはaddCandleBatchesを使用してください。initialTimeRangeは初期転送バッチと同じレンダラターンで適用でき、意図したビューポートが表示される前のフルレンジフレームを回避します。

ストリーミングの集約階層はオフスクリーンで再構築され、アクティブな階層を原子的に置換します。置換が準備できるまで前の階層は表示されたままです。

CSVの読み込み

ブラウザの単純なデータセット向けにloadOHLCVFromCSVがオプションの進捗コールバック付きで提供されます。非常に大きなParquetや独自フィードの場合はUIスレッド外でデコードし、6つの検証済み型付き列を直接転送してください。