インストール

Sixtyfold パッケージは ESM 専用で、@sixtyfold npm スコープで公開されています。Core、Line、Stock のブラウザーランタイムはサードパーティのランタイム依存がなく、Line と Stock は Core のみを依存します。フレームワークアダプターはホストフレームワークを peer dependency として宣言し、SSR はアプリケーションが提供する Canvas2D 実装を使用し、オプションの MCP 開発ツールは別プロセスとして実行されます。

現在の安定版は 1.0.2 で、2026年11月1日に公開されました。これは可視性やフォーカスの変更後に Firefox 159 で Line および Stock の Worker チャートが利用不可になる問題を修正します。パブリック API に変更はありません。アップグレード時は 1.0.2 リリースノート と ストリーミング契約 を確認してください。engines、アダプター、SSR パッケージ、オプションの MCP ツールは同じリリースバージョンに合わせてください；以下の @1 コマンドは現在の安定 v1 リリースを選択します。

パッケージインデックス

pnpm add @sixtyfold/line@1

npm install @sixtyfold/stock@1

必要なときにのみオプションのパッケージを追加してください。

pnpm add @sixtyfold/themes@1 @sixtyfold/ssr@1

フレームワークアダプターは別個のパッケージです。アプリケーションで使用するアダプターと、そのアプリケーションで使用するチャートエンジンのみをインストールしてください。

# React line chart — stock is not installed
pnpm add @sixtyfold/react@1 @sixtyfold/line@1

# Vue stock chart — line is not installed
pnpm add @sixtyfold/vue@1 @sixtyfold/stock@1

同じパターンは@sixtyfold/angular、@sixtyfold/svelte、および@sixtyfold/solidを通じても利用できます。これらの/lineまたは/stockエントリポイントをインポートしてください。ライフサイクル、SSR、および型付き配列の例についてはFramework adaptersを参照してください。

オプションのMCP開発者向けツール

@sixtyfold/mcp は AI コーディングツール向けの別プロセスのローカル実行環境です。特定のバージョン化された API を検査し、最小限のパッケージセットを推奨し、フレームワーク統合コードを生成し、チャートオプションをチェックし、レンダリングやパフォーマンスの問題診断を支援できます。

{
  "mcpServers": {
    "sixtyfold": {
      "command": "npx",
      "args": ["-y", "@sixtyfold/mcp@1"]
    }
  }
}

これはチャートの依存物ではなくブラウザー バンドルに含まれず、Sixtyfold の使用に必須ではありません。完全なツール情報、プライバシー、検証に関する参照は MCP server を参照してください。

最小限の折れ線グラフ

canvas 要素に具体的な CSS サイズを指定してください。Sixtyfold は要素を監視し、アクティブな device-pixel-ratio を用いてバッキングストアのサイズを決定します。

<canvas id="chart" style="display:block;width:100%;height:420px"></canvas>

import { LineChart } from "@sixtyfold/line";

const canvas = document.querySelector<HTMLCanvasElement>("#chart");
if (!canvas) throw new Error("Chart canvas was not found");

const chart = new LineChart(canvas, {
  renderMode: "auto",
  axis: { bottom: { format: "time" } },
  series: [{ name: "Temperature", unit: { suffix: " °C", decimals: 1 } }],
});

await chart.initialize();
chart.setData({
  x: new Float64Array([1711929600000, 1711933200000, 1711936800000]),
  y: new Float64Array([12.4, 13.1, 12.8]),
  length: 3,
});

バンドラーとセキュリティポリシー

Worker の生成はパッケージが出力する ESM ワーカー用 URL を使用します。コンパイル済みファイルを公開ディレクトリにコピーするのではなく、バンドラーにパッケージのインポートを処理させてください。コンテンツセキュリティポリシーは worker-src 'self' を通じた同一オリジンの Worker を許可する必要があります。許可されていない場合、renderMode: "auto" はメインスレッドにフォールバックします。

例外は Angular のアプリケーションビルダーです：Line または Stock パッケージの dist/assets ディレクトリをアプリケーションの assets 設定に追加してください。正確な設定は Framework adapters に示されています。

Sixtyfold はフォント、アナリティクス、テーマ、データ、その他のネットワークリソースを自動で読み込むことはありません。URL ベースのオーバーレイ画像は、呼び出し元が明示的にその URL を提供するため例外です。

クリーンアップ

chart.destroy();

破棄後のチャートを再利用しないでください。新しいキャンバスをアタッチする場合は新しいインスタンスを構築してください。