チャートギャラリー / すべてこのページに掲載

2つのライブラリ。1つの描画原則。

まず全サンプルの索引を確認し、その後で公開パッケージごとに絞り込めます。チャートとコード強調は表示領域の近くでのみ有効になり、大規模な合成ワークロードは明示的に起動するまで待機します。

索引 / 全サンプルを一覧

起動する前に、すべての内容を把握できます。

タイトル、負荷、描画カテゴリをコンパクトに一覧表示します。サンプルを直接開くか、ライブラリを絞り込めます。

@sixtyfold/line

Sixtyfold Line Charts

@sixtyfold/stock

Sixtyfold Stock Charts

@sixtyfold/line

Sixtyfold Line Charts

11ライブサンプル

ライン、ステップ、レンジ、正負のバー、積み上げ面、ストリーミング、数百万点対応 LOD を備えた時系列描画。

L01DATA@sixtyfold/line

給電電流100万分

出典に忠実な2年間の電力アーカイブを、4,196点の初期フレームから4つの電流チャンネルと明示的な欠測すべてへ段階的に展開します。

表示領域に近づくと起動します

1,052,6401分行

出典: FeederBW feeder_001
ライセンス: CC BY 4.0

step linesParquetstaged hydrationgaps

出典レコードライセンス本文

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: "給電電流100万分" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "L1 皮相電流", type: "step-after", unit: { suffix: " A" } },
    { name: "L2 皮相電流", type: "step-after", unit: { suffix: " A" } },
    { name: "L3 皮相電流", type: "step-after", unit: { suffix: " A" } },
    { name: "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

200地点の気象エンベロープ

公式の時間別データから、出典に基づく最小–最大バンド、ネットワークの算術平均、選択した給電地点の気温を表示します。

表示領域に近づくと起動します

3,508,800元観測値

出典: FeederBW ICON-D2 weather
ライセンス: CC BY 4.0

range bandmean200 locationshourly UTC

出典レコードライセンス本文

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: "200地点の気象エンベロープ" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "200地点の最小–最大", type: "range", width: 0,
      band: { fill: 0.18, borderWidth: 0 } },
    { name: "200地点の平均", type: "line" },
    { name: "フィーダー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

混合系列2,000万値

ブラウザ生成の6信号を、ライン、2種類のステップ配置、レンジ、バー、価格水準として、Worker対応Canvas2Dビューにまとめます。

表示領域に近づくと起動します

20,000,000デスクトップ値

出典: Deterministic in-browser generator
ライセンス: 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: "混合系列2,000万値" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "信号A（コア）", type: "line" },
    { name: "信号B（バー）", type: "bar" },
    { name: "信号C（ステップ）", type: "step-after" },
    { name: "信号D（範囲帯）", type: "range" },
    { name: "信号E（中央ステップ）", type: "step-mid" },
    { name: "信号F（価格）", 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

AIデータセンターの600万テレメトリ値

150万時点の合成障害トレースで、計算使用率、HBM負荷、熱的余裕、スロットリング率を1本の運用タイムライン上に追跡します。

表示領域に近づくと起動します

6,000,000デスクトップのテレメトリ値

出典: Deterministic synthetic AI accelerator telemetry
ライセンス: 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: "AIデータセンターの600万テレメトリ値" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "計算使用率", type: "line", width: 2,
      unit: { suffix: " %" } },
    { name: "HBM負荷", type: "line", width: 1.6,
      unit: { suffix: " %" } },
    { name: "熱的余裕", type: "line", width: 1.4,
      unit: { suffix: " %" } },
    { name: "スロットリング率", 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

Transformer推論パイプラインの800万値

200万個の合成5ミリ秒区間について、処理レイテンシを待機、プリフィル、KVキャッシュ転送、トークンデコードに分解し、増大するボトルネックを群全体から1リクエストまで可視化します。

表示領域に近づくと起動します

8,000,000デスクトップのレイテンシ値

出典: Deterministic synthetic transformer-serving trace
ライセンス: 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: "Transformer推論パイプラインの800万値" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "待機", type: "stacked-area",
      stack: { fill: 0.68 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "プリフィル", type: "stacked-area",
      stack: { fill: 0.64 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "KVキャッシュ転送", type: "stacked-area",
      stack: { fill: 0.6 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "トークンデコード", 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

神経電極アレイの1,000万サンプル

合成・非臨床の8本の30 kHzチャンネルが、各125万時点にわたるバースト活動と二相性スパイクを保持します。比較しやすいよう波形は縦方向にオフセットされています。

表示領域に近づくと起動します

10,000,000デスクトップの電極値

出典: Deterministic synthetic non-clinical neural-array recording
ライセンス: 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: "神経電極アレイの1,000万サンプル" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "電極 1", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "電極 2", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "電極 3", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "電極 4", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "電極 5", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "電極 6", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "電極 7", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "電極 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

1つの時間軸に複数ライン

スケールの異なる3信号で、共有時間座標、スプライン補間、操作可能な凡例、十字線、ツールチップを示します。

表示領域に近づくと起動します

120,000系列あたりのサンプル

出典: Deterministic waveform fixture
ライセンス: 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: "1つの時間軸に複数ライン" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "プライマリ", type: "line", width: 1.8 },
    { name: "セカンダリ", type: "line", width: 1.4 },
    { name: "参照", 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

双方向残差と管理限界

5万個の符号付き残差をゼロ基準から描き、階段状の上限・下限を同じ時間軸上で変化させます。

表示領域に近づくと起動します

50,000符号付き残差

出典: Deterministic process-control fixture
ライセンス: 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: "双方向残差と管理限界" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "残差", type: "bar",
      bar: { baseline: 0, widthRatio: 0.82 } },
    { name: "上限", type: "step-mid", width: 1.4 },
    { name: "下限", 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

4つの累積積み上げエリア

4つの正値系列が累積ジオメトリと共有ピラミッドを使い、縮約後も積み上げ構成を変えません。

表示領域に近づくと起動します

36,000レイヤーあたりのサンプル

出典: Deterministic stacked-series fixture
ライセンス: 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: "4つの累積積み上げエリア" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "レイヤー A", type: "stacked-area", stack: { fill: 0.72 } },
    { name: "レイヤー B", type: "stacked-area", stack: { fill: 0.66 } },
    { name: "レイヤー C", type: "stacked-area", stack: { fill: 0.6 } },
    { name: "レイヤー 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

レイヤーとグローのエリア塗り

2つのライン系列でレイヤー塗りとグロー塗りを比較し、線のストロークを正値として保ちます。

表示領域に近づくと起動します

64,000系列あたりのサンプル

出典: Deterministic area-fill fixture
ライセンス: 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: "レイヤーとグローのエリア塗り" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "レイヤー塗り", type: "line", width: 2,
      fill: 0.3, fillEffect: "layered", fillToZero: true },
    { name: "グロー塗り", 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

8系列のインタラクティブ凡例

転送済みデータセットをコピーも変形もせず、セマンティックな凡例で個別の線を非表示・再表示できます。

表示領域に近づくと起動します

8独立系列

出典: Deterministic multi-series fixture
ライセンス: 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: "8系列のインタラクティブ凡例" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: Array.from({ length: 8 }, (_, index) => ({
    name: ["系列 1","系列 2","系列 3","系列 4","系列 5","系列 6","系列 7","系列 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

05ライブサンプル

市場時間、出来高、生ローソク足指標、可視範囲プロファイル、価格水準、イベントマーカーを備えた OHLCV 描画。

S01MARKET@sixtyfold/stock

正確なBTC/USDT：アーカイブからライブまで

明示的に開始するデスクトップ負荷で、Binanceの1分足を収めた固定済みParquetアーカイブをダウンロードし、観測済みの全ローソク足をメインスレッド外でデコードします。その後、Sixtyfoldの共有同一オリジンリレーで欠落分を追補し、確定した各1分足をポーリングします。過去の1分足は合成しません。

表示領域に近づくと起動します

2017 → live正確な観測履歴

出典: Exact Binance Spot monthly archive plus Sixtyfold live relay
利用根拠: Binance developer API-use guidance

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

出典レコード 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：アーカイブからライブまで" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "始値",
    "high": "高値",
    "low": "安値",
    "close": "終値",
    "change": "変化",
    "changePercent": "変化率",
    "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

順序付きローソク足と独立した出来高ペインは、ラインチャートのバケットではなく有効なOHLCV期間で集約します。

表示領域に近づくと起動します

18,000生成ローソク足

出典: Deterministic OHLCV fixture
ライセンス: 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" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "始値",
    "high": "高値",
    "low": "安値",
    "close": "終値",
    "change": "変化",
    "changePercent": "変化率",
    "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

生ローソク足のテクニカル指標

SMA、EMA、ボリンジャーバンド、日次リセットVWAPを生のローソク足から計算し、アクティブな集約へサンプリングします。

表示領域に近づくと起動します

4指標ファミリー

出典: Deterministic OHLCV fixture
ライセンス: 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: "生ローソク足のテクニカル指標" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "始値",
    "high": "高値",
    "low": "安値",
    "close": "終値",
    "change": "変化",
    "changePercent": "変化率",
    "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

可視範囲の推定出来高プロファイル

ローソク足由来の価格別出来高推定が、各足の安値–高値範囲にOHLCV出来高を配分します。可視範囲に追従し、長期表示では入力集約を制限して性能を守ります。価格別の正確な約定データではありません。

表示領域に近づくと起動します

48価格行

出典: Deterministic OHLCV fixture
ライセンス: 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: "可視範囲の推定出来高プロファイル" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "始値",
    "high": "高値",
    "low": "安値",
    "close": "終値",
    "change": "変化",
    "changePercent": "変化率",
    "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

価格ラインとタイムスタンプマーカー

データに固定された水準と時刻順マーカーを間引き、テーマ適用し、市場時間ナビゲーションと同期します。

表示領域に近づくと起動します

O(n)マーカーの選別

出典: Deterministic OHLCV fixture
ライセンス: 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: "価格ラインとタイムスタンプマーカー" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ja-JP",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ja-JP",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "始値",
    "high": "高値",
    "low": "安値",
    "close": "終値",
    "change": "変化",
    "changePercent": "変化率",
    "volume": "出来高"
  },
  },
};

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

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

次へ / 同じ API で構築

全サンプルが公開 API を使用します。

非公開フック、画像による代用、フレームワーク別のデータ変形はありません。完全なリファレンスへ進んでください。

ドキュメントを開く