TanStack/charts

これは何？

主な機能

• 01データモデルを作り直さずに、配列、オブジェクト、タプル、イテラブルをマークに渡せます。
• 02コンパクトな線形、バンド、ポイント、順序尺度を備え、d3-scaleに直接差し替えることもできます。
• 03自動ガイドマージン、テーマ、インタラクションに対応したレスポンシブなサイズ調整が可能です。
• 04SVGのサーバーサイドレンダリング、ハイドレーション、エクスポートに対応します。
• 05マークごとのDOMコストを抑えるための、オプションのCanvasレンダラーを利用できます。
• 06同じチャート定義を、さまざまなフレームワークやvanilla DOMで使用できます。

ユースケース

• ReactやVueのアプリケーションに、標準的な折れ線、棒、面グラフを追加する。
• SSRページや静的エクスポート用に、サーバー上でチャートを描画する。
• 一般的なチャートのプリセットでは足りなくなった、プロダクト固有の可視化を構築する。
• 複数のフレームワークを使うコードベースで、ひとつのチャート定義を共有する。

クイックスタート

1. 1

   ワークスペースの依存関係をインストールする

   pnpm install
2. 2

   統合データダッシュボードのサンドボックスを実行する

   pnpm dev:sandbox

使う前に知っておきたいこと

• !READMEには未リリースのmainブランチについて記載されており、公開済みの1.1.0リリースとは異なる場合があります。
• !開発にはNode.js 22以降とpnpm 11が必要です。
• !CanvasによるレンダリングでDOMの負荷は軽減されますが、大規模なインタラクティブチャートでは、シーンのメモリ使用量や密集したデータに対する最近傍点の検索負荷は軽減されません。

収録されている特集

トピック

よくある質問

charts とは？

粒度の細かいD3プリミティブを基盤に、レスポンシブでアクセシブルなサーバー描画対応チャートを構築する、型安全なTypeScriptのチャート記述ライブラリです。 TanStack Chartsは、マーク、チャネル、スケールを組み合わせてチャートを記述するTypeScript製の可視化ライブラリです。マークは元の配列、オブジェクト、イテラブルをそのまま扱えるため、チャートを構築する際にアプリケーション側でデータモデルを変換する必要はありません。数値、バンド、ポイント、順序尺度をコンパクトに利用でき、より豊富な機能が必要な場合は、ネイティブのd3-scale関数に差し替えられます。

charts は無料で使えますか？ライセンスは？

charts は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

charts は今もメンテナンスされていますか？

活発にメンテナンス中。charts の最終コミットは 2026年10月22日 です。

charts は何に使えますか？

ReactやVueのアプリケーションに、標準的な折れ線、棒、面グラフを追加する。 SSRページや静的エクスポート用に、サーバー上でチャートを描画する。 一般的なチャートのプリセットでは足りなくなった、プロダクト固有の可視化を構築する。 複数のフレームワークを使うコードベースで、ひとつのチャート定義を共有する。

charts のインストール方法は？

ワークスペースの依存関係をインストールする: pnpm install 統合データダッシュボードのサンドボックスを実行する: pnpm dev:sandbox

charts はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/TanStack/charts