React 图表ライブラリ徹底比較：Chart.js, react-chartjs-2, react-vis, recharts

データ可視化は現代の Web アプリケーションに不可欠な要素です。React 生態系には多くの图表ライブラリが存在しますが、chart.js、react-chartjs-2、react-vis、recharts はその中でも特に知名度が高い選択肢です。しかし、これらは内部構造、描画方式、そして保守状況において大きく異なります。本稿では、経験豊富なフロントエンド開発者の視点から、これらの技術的な違いと適切な選定基準を解説します。

🎨 描画エンジン：Canvas vs SVG

图表ライブラリを選ぶ際、最も重要な技術的決定の一つが描画エンジンです。これはパフォーマンスとカスタマイズ性に直接影響します。

chart.js と react-chartjs-2 は HTML5 Canvas を使用します。

• 数千のデータポイントを扱う場合でもパフォーマンスが劣化しにくい。
• 画像として描画されるため、個々の要素（バーや線）へのアクセスは制限される。

// chart.js / react-chartjs-2 (Canvas based)
// 設定オブジェクトを通じて全体を制御する
const data = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [{
    label: 'My Dataset',
    data: [12, 19, 3],
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
  }]
};
// Canvas コンテキストに直接描画されるため、DOM 要素としては存在しない

recharts と react-vis は SVG を使用します。

• 各图表要素が DOM ノード（SVG 要素）として存在するため、CSS やイベントハンドラで細かく制御可能。
• データポイントが極端に多い場合、DOM 負荷によりパフォーマンスが低下する可能性がある。

// recharts (SVG based)
// 各要素が React コンポーネントとして定義される
<BarChart width={500} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="value" fill="#8884d8" />
</BarChart>

// react-vis (SVG based)
// 同様に SVG コンポーネントを組み合わせる
<XYPlot width={500} height={300}>
  <XAxis />
  <YAxis />
  <BarSeries data={data} />
</XYPlot>

🛠️ API デザイン：設定ベース vs 宣言的コンポーネント

ライブラリの使い勝手は、API が「設定オブジェクト」か「宣言的コンポーネント」かによって決まります。

chart.js と react-chartjs-2 は設定オブジェクト中心です。

• 图表の見た目や挙動を巨大な設定オブジェクトで定義します。
• 型定義（TypeScript）が複雑になりがちで、オートコンプリートの恩恵を受けにくい場合があります。

// react-chartjs-2
// options オブジェクト内で細かく設定する
const options = {
  responsive: true,
  plugins: {
    legend: { position: 'top' },
    tooltip: { enabled: true }
  }
};

<Bar data={data} options={options} />

recharts は JSX を使った宣言的アプローチです。

• 图表を構成するパーツ（軸、ツールチップ、バー）をコンポーネントとして記述します。
• React の知識がそのまま活かせ、コードの可読性が高いです。

// recharts
// 子コンポーネントで構造を表現する
<LineChart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>

react-vis も宣言的ですが、独自のコンポーネント構造を持ちます。

• XYPlot をラッパーとし、その中に系列を配置します。

// react-vis
// 独自のコンポーネント階層を持つ
<XYPlot width={300} height={300}>
  <VerticalGridLines />
  <HorizontalGridLines />
  <XAxis />
  <YAxis />
  <BarSeries data={data} />
</XYPlot>

🚨 保守状況と将来性

ライブラリの選定において、メンテナンス状況は機能以上に重要です。

react-vis は非推奨（Deprecated）です。

• 開発元の Uber により、2021 年頃にメンテナンスが終了することがアナウンスされました。
• 既存のプロジェクトでは、セキュリティリスクや React の新バージョン（React 18 など）との互換性問題が発生する可能性があります。
• 新規プロジェクトでの使用は避けてください。 recharts や chart.js への移行が強く推奨されます。

chart.js / react-chartjs-2 と recharts は活発にメンテナンスされています。

• 両者とも React 18 に対応しており、コミュニティも活発です。
• 定期的なアップデートにより、バグ修正や新機能が追加されています。

📱 レスポンシブ対応とカスタマイズ

現代の Web アプリでは、さまざまな画面サイズへの対応が必須です。

chart.js / react-chartjs-2

• デフォルトでレスポンシブ対応していますが、Canvas の性質上、CSS での微調整が難しい場合があります。
• カスタマイズにはプラグインシステムを使用します。

// react-chartjs-2 (Plugin usage)
// キャンバス描画後のフックを利用してカスタム描画を行う
const customPlugin = {
  id: 'customPlugin',
  afterDraw: (chart) => {
    // Canvas コンテキストに直接アクセスして描画
    const ctx = chart.ctx;
    ctx.fillText('Custom Text', 10, 10);
  }
};
Chart.register(customPlugin);

recharts

• ResponsiveContainer コンポーネントを使用することで、親要素のサイズに自動的に追従します。
• SVG であるため、CSS クラスやインラインスタイルでの装飾が容易です。

// recharts (Responsive)
// 親要素のサイズに合わせて自動リサイズ
<ResponsiveContainer width="100%" height={300}>
  <BarChart data={data}>
    <Bar dataKey="value" fill="#8884d8" className="custom-bar" />
  </BarChart>
</ResponsiveContainer>

📊 比較サマリー

💡 最終的な推奨事項

技術選定においては、プロジェクトの要件とチームのスキルセットが鍵となります。

recharts を選ぶべきケース：

• React 開発者が中心のチームである。
• 图表の見た目や挙動を細かくカスタマイズしたい。
• 標準的なダッシュボードや管理画面を構築する。
• SVG ベースの柔軟性が欲しい。

chart.js / react-chartjs-2 を選ぶべきケース：

• 非常に多くのデータポイント（数千件以上）を処理する必要がある。
• Canvas 描画によるパフォーマンスが不可欠である。
• 既に Chart.js の知識や資産がチーム内にある。
• React 以外のフレームワークとの共用を視野に入れている。

react-vis について：

• 残念ながら、このライブラリは選択肢から外すべきです。メンテナンスされていないライブラリを採用することは、技術的負債を背負うことを意味します。既存システムで使用中の場合は、recharts などへの移行計画を立てることを強く推奨します。

結論： 新規の React プロジェクトにおいて、バランスの取れた選択は recharts です。React の哲学に沿った API デザインは開発効率を高め、十分なパフォーマンスとカスタマイズ性を提供します。ただし、ビッグデータを扱う特殊なケースでは react-chartjs-2 が有力な代替案となります。