円グラフライブラリ比較

3つの人気ライブラリで割合データを表示し、パイチャートとドーナツチャートを比較

🥧 使用しているサンプルデータ

製品カテゴリー別の売上シェア（%）のデータを使用しています。

[
  {
    "name": "製品A",
    "value": "35%"
  },
  {
    "name": "製品B",
    "value": "25%"
  },
  {
    "name": "製品C",
    "value": "20%"
  },
  {
    "name": "製品D",
    "value": "12%"
  },
  {
    "name": "その他",
    "value": "8%"
  }
]

1. Recharts

シンプルな実装で美しい円グラフを作成。アニメーション付きで視覚的に魅力的。

✓ パイ・ドーナツ両対応✓ ラベル自動配置✓ アニメーション

特徴: innerRadiusを設定することでドーナツチャートに変換可能。ラベルのカスタマイズも柔軟で、パーセンテージ表示が簡単。

2. Nivo

洗練されたデザインと豊富なアニメーションオプション

✓ 美しいデフォルト✓ インタラクティブ✓ アクセシブル

特徴: cornerRadiusで角を丸くしたり、activeOuterRadiusOffsetでホバー時の拡大効果を設定可能。視覚的に非常に洗練されたデザイン。

3a. Chart.js - パイチャート

シンプルな円グラフ。軽量で高速な描画が特徴。

✓ 軽量✓ Canvas描画✓ シンプル

特徴: 基本的な円グラフ。中心が塗りつぶされた伝統的なパイチャート形式。設定がシンプルで導入が容易。

3b. Chart.js - ドーナツチャート

中央が空いたドーナツ形式。中央にテキストや数値を配置可能。

✓ 中央スペース活用✓ モダンな見た目✓ 高速

特徴: パイチャートとほぼ同じ実装で、コンポーネントを変えるだけでドーナツ形式に。中央のスペースに合計値などを表示するのが一般的。

ライブラリ比較

ライブラリ	ドーナツ対応	ラベル配置	アニメーション	おすすめ用途
Recharts	◎	自動・柔軟	◎	ダッシュボード
Nivo	◎	高度	◎	デザイン重視
Chart.js	◎（別コンポーネント）	標準	◯	シンプルな用途

パイチャート vs ドーナツチャート

🥧 パイチャート（円グラフ）

✓伝統的で馴染みやすい
✓小さいスペースでも視認性が良い
✓全体に対する割合が直感的

🍩 ドーナツチャート

✓モダンで洗練された見た目
✓中央に合計値や重要な情報を配置可能
✓複数のドーナツを重ねて表現可能

円グラフの選択ポイント

•Recharts: Reactアプリで標準的な円グラフが必要な場合。パイとドーナツの切り替えが簡単で、実装コストが低い。
•Nivo: デザイン性が重要で、美しいアニメーションやインタラクションが必要な場合。プレゼンテーション向け。
•Chart.js: シンプルな実装で軽量な円グラフが欲しい場合。パイとドーナツは別コンポーネントとして用意されている。

⚠️ 円グラフ使用時の注意点

•カテゴリーは5〜7個程度に抑える（多すぎると見づらい）
•小さい割合は「その他」にまとめることを検討
•正確な比較が必要な場合は棒グラフの方が適している
•時系列データには折れ線グラフを使用する