インストール

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

パッケージ索引

pnpm add @sixtyfold/line@next

npm install @sixtyfold/stock@next

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

pnpm add @sixtyfold/themes@next @sixtyfold/ssr@next

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

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

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

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

任意のMCP開発ツール

@sixtyfold/mcpはAIコーディングツール用の別プロセスです。正確なバージョン化されたAPIを検査し、最小パッケージ群を推奨し、フレームワーク統合を生成し、チャートオプションを検証し、レンダリングやパフォーマンスの問題診断を支援できます。

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

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

最小限の折れ線チャート

canvasに具体的なCSSサイズを設定してください。Sixtyfoldは要素を監視し、アクティブなデバイスピクセル比でバックングストアサイズを解決します。

<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を使用します。バンドラーにパッケージインポートを処理させ、コンパイル済みファイルをpublicディレクトリにコピーするのは避けてください。Content Security Policyはworker-src 'self'を通した同一オリジンWorkerを許可する必要があります; 許可されない場合、renderMode: "auto"はメインスレッドにフォールバックします。

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

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

クリーンアップ

chart.destroy();

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