円グラフライブラリ比較
3つの人気ライブラリで割合データを表示し、パイチャートとドーナツチャートを比較
🥧 使用しているサンプルデータ
製品カテゴリー別の売上シェア（%）のデータを使用しています。
[
{
"name": "製品A",
"value": "35%"
},
{
"name": "製品B",
"value": "25%"
},
{
"name": "製品C",
"value": "20%"
},
{
"name": "製品D",
"value": "12%"
},
{
"name": "その他",
"value": "8%"
}
]1. Recharts
シンプルな実装で美しい円グラフを作成。アニメーション付きで視覚的に魅力的。
✓ パイ・ドーナツ両対応✓ ラベル自動配置✓ アニメーション
特徴: innerRadiusを設定することでドーナツチャートに変換可能。 ラベルのカスタマイズも柔軟で、パーセンテージ表示が簡単。
tsx
'use client';
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const data = [
{ name: '製品A', value: 4200 },
{ name: '製品B', value: 3800 },
{ name: '製品C', value: 2100 },
{ name: '製品D', value: 1500 },
];
const COLORS = ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'];
export function RechartsPieChart() {
return (
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%"
outerRadius={100} innerRadius={50} label>
{data.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
</Pie>
<Tooltip />
<Legend />
</PieChart>
</ResponsiveContainer>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Rechartsを使った円グラフ（ドーナツチャート）を実装してください。 - 使用ライブラリ: recharts（PieChart・Pie・Cell・Tooltip・Legend・ResponsiveContainer） - サンプルデータ: 製品カテゴリー別売上シェア5種のデータを用意すること - innerRadiusを設定してドーナツチャート形式にすること - ホバー時にツールチップでカテゴリー名・値・割合を表示すること - 各セクションにラベルとパーセンテージを表示すること - 親要素の幅に応じてチャートサイズが変わるよう対応すること - チャート初期表示時に展開アニメーションを追加すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
2. Nivo
洗練されたデザインと豊富なアニメーションオプション
✓ 美しいデフォルト✓ インタラクティブ✓ アクセシブル
特徴: cornerRadiusで角を丸くしたり、activeOuterRadiusOffsetで ホバー時の拡大効果を設定可能。視覚的に非常に洗練されたデザイン。
tsx
'use client';
import { ResponsivePie } from '@nivo/pie';
const data = [
{ id: '製品A', value: 4200, color: '#3b82f6' },
{ id: '製品B', value: 3800, color: '#10b981' },
{ id: '製品C', value: 2100, color: '#8b5cf6' },
{ id: '製品D', value: 1500, color: '#f97316' },
];
export function NivoPieChart() {
return (
<div style={{ height: 300 }}>
<ResponsivePie
data={data}
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
innerRadius={0.6}
padAngle={0.7}
cornerRadius={3}
activeOuterRadiusOffset={8}
colors={{ datum: 'data.color' }}
arcLinkLabelsSkipAngle={10}
arcLinkLabelsThickness={2}
arcLabelsSkipAngle={10}
/>
</div>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Nivoを使った円グラフ（ドーナツチャート）を実装してください。 - 使用ライブラリ: @nivo/pie（ResponsivePie） - サンプルデータ: 製品カテゴリー別売上シェア5種のデータを用意すること - innerRadiusでドーナツ形式にし、cornerRadiusで角を丸くすること - activeOuterRadiusOffsetでホバー時の拡大効果を設定すること - arcLinkLabelsでラベルを表示し、arcLabelsでセクション内にパーセンテージを表示すること - 親要素の幅に応じてチャートサイズが変わるよう対応すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
3a. Chart.js - パイチャート
シンプルな円グラフ。軽量で高速な描画が特徴。
✓ 軽量✓ Canvas描画✓ シンプル
特徴: 基本的な円グラフ。中心が塗りつぶされた伝統的なパイチャート形式。 設定がシンプルで導入が容易。
tsx
'use client';
import { Pie } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend);
const data = {
labels: ['製品A', '製品B', '製品C', '製品D'],
datasets: [{
data: [4200, 3800, 2100, 1500],
backgroundColor: [
'rgba(59,130,246,0.8)', 'rgba(16,185,129,0.8)',
'rgba(139,92,246,0.8)', 'rgba(249,115,22,0.8)',
],
borderColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'],
borderWidth: 2,
}],
};
export function ChartJSPieChart() {
return <Pie data={data} options={{ responsive: true, maintainAspectRatio: false }} height={300} />;
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Chart.jsを使ったパイチャート（円グラフ）を実装してください。 - 使用ライブラリ: chart.js（ArcElement・Tooltip・Legend）、react-chartjs-2（Pie） - サンプルデータ: 製品カテゴリー別売上シェア5種のデータを用意すること - 中心が塗りつぶされた伝統的なパイチャート形式で実装すること - ホバー時にツールチップでカテゴリー名と値を表示すること - 凡例を右側に表示すること - 親要素の幅に応じてレスポンシブ対応すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
3b. Chart.js - ドーナツチャート
中央が空いたドーナツ形式。中央にテキストや数値を配置可能。
✓ 中央スペース活用✓ モダンな見た目✓ 高速
特徴: パイチャートとほぼ同じ実装で、コンポーネントを変えるだけでドーナツ形式に。 中央のスペースに合計値などを表示するのが一般的。
tsx
'use client';
import { Doughnut } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend);
const data = {
labels: ['製品A', '製品B', '製品C', '製品D'],
datasets: [{
data: [4200, 3800, 2100, 1500],
backgroundColor: [
'rgba(59,130,246,0.8)', 'rgba(16,185,129,0.8)',
'rgba(139,92,246,0.8)', 'rgba(249,115,22,0.8)',
],
borderColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'],
borderWidth: 2,
}],
};
export function ChartJSDoughnutChart() {
return (
<Doughnut data={data}
options={{ responsive: true, maintainAspectRatio: false, cutout: '60%' }}
height={300} />
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Chart.jsを使ったドーナツチャートを実装してください。 - 使用ライブラリ: chart.js（ArcElement・Tooltip・Legend）、react-chartjs-2（Doughnut） - サンプルデータ: 製品カテゴリー別売上シェア5種のデータを用意すること - 中央が空いたドーナツ形式で実装すること - ホバー時にツールチップでカテゴリー名と値を表示すること - 凡例を右側に表示すること - 親要素の幅に応じてレスポンシブ対応すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| ライブラリ | ドーナツ対応 | ラベル配置 | アニメーション | おすすめ用途 |
|---|---|---|---|---|
| Recharts | ◎ | 自動・柔軟 | ◎ | ダッシュボード |
| Nivo | ◎ | 高度 | ◎ | デザイン重視 |
| Chart.js | ◎（別コンポーネント） | 標準 | ◯ | シンプルな用途 |
パイチャート vs ドーナツチャート
🥧 パイチャート（円グラフ）
- ✓伝統的で馴染みやすい
- ✓小さいスペースでも視認性が良い
- ✓全体に対する割合が直感的
🍩 ドーナツチャート
- ✓モダンで洗練された見た目
- ✓中央に合計値や重要な情報を配置可能
- ✓複数のドーナツを重ねて表現可能
円グラフの選択ポイント
- •Recharts: Reactアプリで標準的な円グラフが必要な場合。 パイとドーナツの切り替えが簡単で、実装コストが低い。
- •Nivo: デザイン性が重要で、美しいアニメーションや インタラクションが必要な場合。プレゼンテーション向け。
- •Chart.js: シンプルな実装で軽量な円グラフが欲しい場合。 パイとドーナツは別コンポーネントとして用意されている。
⚠️ 円グラフ使用時の注意点
- •カテゴリーは5〜7個程度に抑える（多すぎると見づらい）
- •小さい割合は「その他」にまとめることを検討
- •正確な比較が必要な場合は棒グラフの方が適している
- •時系列データには折れ線グラフを使用する