ゲージ／ラジアルバーチャートライブラリ比較
3つの人気ライブラリで進捗率やKPIを円形メーターで表示し、実装方法とスタイルを比較
📊 使用しているサンプルデータ
ダッシュボードのKPI指標4項目（売上達成率・顧客満足度・タスク完了率・システム稼働率）を使用しています。
[
{
"name": "売上達成率",
"value": 82,
"fill": "#6366f1"
},
{
"name": "顧客満足度",
"value": 91,
"fill": "#22c55e"
},
{
"name": "タスク完了率",
"value": 67,
"fill": "#f59e0b"
},
{
"name": "システム稼働率",
"value": 99,
"fill": "#3b82f6"
}
]1. Recharts
RechartsのRadialBarChartコンポーネントで放射状の棒グラフを実現。startAngleとendAngleで半円（ゲージ）形式にも切り替え可能。中央にラベルを配置することでKPIウィジェットとして活用できる。innerRadiusとouterRadiusでリングの太さを調整可能。
✓ RadialBarChart標準搭載✓ 宣言的API✓ アニメーション
tsx
'use client';
import {
RadialBarChart, RadialBar, Legend, Tooltip, ResponsiveContainer,
} from 'recharts';
const data = [
{ name: '製品A', value: 85, fill: '#3b82f6' },
{ name: '製品B', value: 72, fill: '#10b981' },
{ name: '製品C', value: 91, fill: '#8b5cf6' },
{ name: '製品D', value: 63, fill: '#f97316' },
];
export function RechartsRadialBarChart() {
return (
<ResponsiveContainer width="100%" height={300}>
<RadialBarChart cx="50%" cy="50%" innerRadius="20%" outerRadius="80%" data={data}>
<RadialBar dataKey="value" cornerRadius={4} label={{ position: 'insideStart', fill: '#fff' }} />
<Legend />
<Tooltip />
</RadialBarChart>
</ResponsiveContainer>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Rechartsを使ったラジアルバーチャート（ゲージチャート）を実装してください。 - 使用ライブラリ: recharts（RadialBarChart・RadialBar・Legend・Tooltip・ResponsiveContainer） - サンプルデータ: KPI指標4項目（売上達成率・顧客満足度・タスク完了率・システム稼働率）を用意すること - startAngleとendAngleで半円（ゲージ）形式にすること - innerRadiusとouterRadiusでリングの太さを調整し、各KPIを同心円状に並べること - ホバー時にツールチップでKPI名と達成率を表示すること - 親要素の幅に応じてチャートサイズが変わるよう対応すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
2. Nivo
@nivo/pie パッケージのResponsivePieをドーナツ形式で使用し、startAngle・endAngleを調整することでゲージ風の表現が可能。もしくは@nivo/arcsを活用したカスタム実装でより柔軟なゲージチャートを実現できる。
✓ D3.jsベース✓ 美しいデザイン✓ カスタマイズ豊富
82%
売上達成率
91%
顧客満足度
67%
タスク完了率
99%
システム稼働率
tsx
'use client';
import { ResponsivePie } from '@nivo/pie';
const data = [
{ id: '製品A', value: 85, color: '#3b82f6' },
{ id: '製品B', value: 72, color: '#10b981' },
{ id: '製品C', value: 91, color: '#8b5cf6' },
{ id: '製品D', value: 63, color: '#f97316' },
];
export function NivoRadialBarChart() {
return (
<div style={{ height: 300 }}>
<ResponsivePie
data={data}
margin={{ top: 20, right: 80, bottom: 20, left: 80 }}
innerRadius={0.5}
padAngle={2}
cornerRadius={4}
colors={{ datum: 'data.color' }}
borderWidth={1}
startAngle={-90}
endAngle={90}
legends={[{
anchor: 'bottom',
direction: 'row',
itemWidth: 80,
itemHeight: 20,
}]}
/>
</div>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Nivoを使ったゲージチャートを実装してください。 - 使用ライブラリ: @nivo/pie（ResponsivePie） - サンプルデータ: KPI指標4項目（売上達成率・顧客満足度・タスク完了率・システム稼働率）を用意すること - ResponsivePieをドーナツ形式（innerRadius設定）で使用し、startAngle・endAngleを調整して半円ゲージ風の表現にすること - 各KPIを個別のゲージとしてグリッドレイアウトで並べること - チャートの下部に達成率の数値とKPI名を表示すること - 親要素の幅に応じてチャートサイズが変わるよう対応すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
3. Chart.js (react-chartjs-2)
Chart.jsのDoughnutチャートにcircumference: 180とrotation: -90を指定することで半円ゲージを実現。needleプラグインを追加すれば針付きのメーター表示も可能。Canvas描画のためアニメーションがスムーズ。
✓ Canvas描画✓ Doughnutベース✓ 軽量
82%
売上達成率
91%
顧客満足度
67%
タスク完了率
99%
システム稼働率
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: [85, 72, 91, 63],
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 ChartJSRadialBarChart() {
return (
<Doughnut data={data}
options={{
responsive: true,
maintainAspectRatio: false,
circumference: 180,
rotation: -90,
}}
height={300} />
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Chart.jsを使ったゲージチャートを実装してください。 - 使用ライブラリ: chart.js（ArcElement・Tooltip・Legend）、react-chartjs-2（Doughnut） - サンプルデータ: KPI指標4項目（売上達成率・顧客満足度・タスク完了率・システム稼働率）を用意すること - Doughnutチャートにcircumference: Math.PIとrotation: -Math.PIを指定して半円ゲージを実現すること - 各KPIを個別のゲージとしてグリッドレイアウトで並べること - チャートの下部に達成率の数値とKPI名を表示すること - Canvas描画でアニメーションをスムーズに表示すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| ライブラリ | レンダリング | ゲージ対応 | 複数表示 | おすすめ用途 |
|---|---|---|---|---|
| Recharts | SVG | ◎ 標準搭載 | ◎ | KPIダッシュボード |
| Nivo | SVG | ◯ カスタム実装 | ◯ | デザイン重視のダッシュボード |
| Chart.js | Canvas | ◯ Doughnutベース | ◯ | シンプルなゲージ表示 |
選択のポイント
- •Recharts：RadialBarChartが標準搭載されており、複数のKPIを同心円状に並べる表現が得意。ダッシュボードのウィジェットとして最も使いやすい。
- •Nivo：専用コンポーネントはないがPieやArcを活用した高品質なゲージを実装可能。デザインの一貫性を保ちたいNivoプロジェクトに最適。
- •Chart.js：Doughnutの設定変更だけでゲージを実現できるためシンプル。既にChart.jsを使用しているプロジェクトへの追加コストが最も低い。
典型的な使用例
📊
KPIダッシュボード
売上達成率・目標進捗・スコアなどの単一指標を視覚的に表示
💰
予算消化率
月次・四半期の予算に対する実績をリアルタイムで把握
⚡
システム監視
CPU使用率・メモリ使用率・ディスク容量などのリソース監視
🎯
目標管理
個人・チームのOKR進捗をひと目で確認できるウィジェット
⚠️ 使用時の注意点
- •1つのゲージで表示する指標は1つに絞る（複数指標は複数のゲージを並べる）
- •達成率100%超えのデータがある場合の表示挙動を事前に確認・設計する
- •半円ゲージは直感的だが、開始・終了の角度設定によって印象が変わるため注意
- •数値ラベルを中央または近傍に必ず表示し、グラフだけで判断させない設計にする