積み上げ棒グラフライブラリ比較
4つの人気ライブラリで積み上げ棒グラフを表示し、実装方法とスタイルを比較
rechartsv3.8.1@nivo/corev0.99.0chart.jsv4.5.1react-chartjs-2v5.3.1apexchartsv5.10.6react-apexchartsv2.1.0
1. Recharts (shadcn/ui風)
BarコンポーネントにstackId="stack"を指定するだけで積み上げが実現。各系列をReactコンポーネントとして宣言的に記述でき、アニメーションも標準対応。
✓ stackId対応✓ 宣言的API✓ レスポンシブ
特徴: stackIdを各Barに指定するだけで実装可能。既存の棒グラフから積み上げへの移行コストが低い。
tsx
'use client';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const data = [
{ quarter: 'Q1', productA: 2400, productB: 1398, productC: 800, productD: 600 },
{ quarter: 'Q2', productA: 1398, productB: 2800, productC: 1200, productD: 900 },
{ quarter: 'Q3', productA: 3200, productB: 1800, productC: 1600, productD: 1100 },
{ quarter: 'Q4', productA: 2800, productB: 3200, productC: 2000, productD: 1400 },
];
export function RechartsStackedBarChart() {
return (
<ResponsiveContainer width="100%" height={300}>
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="quarter" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="productA" stackId="stack" fill="#3b82f6" name="製品A" />
<Bar dataKey="productB" stackId="stack" fill="#10b981" name="製品B" />
<Bar dataKey="productC" stackId="stack" fill="#8b5cf6" name="製品C" />
<Bar dataKey="productD" stackId="stack" fill="#f97316" name="製品D" radius={[4, 4, 0, 0]} />
</BarChart>
</ResponsiveContainer>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Rechartsを使った積み上げ棒グラフを実装してください。 - 使用ライブラリ: recharts（BarChart・Bar・XAxis・YAxis・CartesianGrid・Tooltip・Legend・ResponsiveContainer） - サンプルデータ: 4製品（製品A・B・C・D）の四半期別売上（Q1〜Q4）を用意すること - 各BarコンポーネントにstackId="stack"を指定して積み上げを実現すること - ホバー時にツールチップで各セグメントの値を表示すること - 凡例を表示すること - 親要素の幅に応じてチャートサイズが変わるよう対応すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
2. Nivo
ResponsiveBarにkeys配列とindexByを指定し、groupMode="stacked"で積み上げ表示。凡例・ツールチップが標準で充実しており、labelSkipHeightで小さいセルのラベルを自動非表示にできる。
✓ D3.jsベース✓ 美しいデザイン✓ インタラクティブ
特徴:groupMode="stacked"と"grouped"を切り替えるだけでグループ棒グラフにも変換可能。デザイン性が高くダッシュボード向け。
tsx
'use client';
import { ResponsiveBar } from '@nivo/bar';
const data = [
{ quarter: 'Q1', productA: 2400, productB: 1398, productC: 800, productD: 600 },
{ quarter: 'Q2', productA: 1398, productB: 2800, productC: 1200, productD: 900 },
{ quarter: 'Q3', productA: 3200, productB: 1800, productC: 1600, productD: 1100 },
{ quarter: 'Q4', productA: 2800, productB: 3200, productC: 2000, productD: 1400 },
];
export function NivoStackedBarChart() {
return (
<div style={{ height: 300 }}>
<ResponsiveBar
data={data}
keys={['productA', 'productB', 'productC', 'productD']}
indexBy="quarter"
margin={{ top: 20, right: 130, bottom: 50, left: 60 }}
padding={0.3}
groupMode="stacked"
colors={['#3b82f6', '#10b981', '#8b5cf6', '#f97316']}
labelSkipHeight={16}
legends={[{
dataFrom: 'keys',
anchor: 'bottom-right',
direction: 'column',
itemWidth: 100,
itemHeight: 20,
}]}
/>
</div>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Nivoを使った積み上げ棒グラフを実装してください。 - 使用ライブラリ: @nivo/bar（ResponsiveBar） - サンプルデータ: 4製品（製品A・B・C・D）の四半期別売上（Q1〜Q4）を用意すること - keysとindexByを指定し、groupMode="stacked"で積み上げ表示にすること - labelSkipHeightで小さいセルのラベルを自動非表示にすること - 凡例を表示すること - 親要素の幅に応じてチャートサイズが変わるよう対応すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
3. Chart.js (react-chartjs-2)
datasetsのstacked: trueとscalesのstacked: trueを組み合わせるだけで積み上げが実現。Canvas APIを使用しているため、データ量が多くてもパフォーマンスが安定。
✓ Canvas描画✓ 軽量✓ 大量データ対応
特徴: stacked設定がシンプルで、既にChart.jsを使用しているプロジェクトへの導入が容易。Canvas描画で大量データでも安定動作。
tsx
'use client';
import { Bar } from 'react-chartjs-2';
import {
Chart as ChartJS, CategoryScale, LinearScale,
BarElement, Title, Tooltip, Legend,
} from 'chart.js';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
const labels = ['Q1', 'Q2', 'Q3', 'Q4'];
const data = {
labels,
datasets: [
{ label: '製品A', data: [2400, 1398, 3200, 2800], backgroundColor: 'rgba(59,130,246,0.8)', stack: 'stack' },
{ label: '製品B', data: [1398, 2800, 1800, 3200], backgroundColor: 'rgba(16,185,129,0.8)', stack: 'stack' },
{ label: '製品C', data: [800, 1200, 1600, 2000], backgroundColor: 'rgba(139,92,246,0.8)', stack: 'stack' },
{ label: '製品D', data: [600, 900, 1100, 1400], backgroundColor: 'rgba(249,115,22,0.8)', stack: 'stack' },
],
};
export function ChartJSStackedBarChart() {
return (
<Bar data={data}
options={{ responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true }, y: { stacked: true } } }}
height={300} />
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Chart.jsを使った積み上げ棒グラフを実装してください。 - 使用ライブラリ: chart.js（CategoryScale・LinearScale・BarElement・Title・Tooltip・Legend）、react-chartjs-2（Bar） - サンプルデータ: 4製品（製品A・B・C・D）の四半期別売上（Q1〜Q4）を用意すること - scalesのx・yにstacked: trueを指定して積み上げを実現すること - ホバー時にツールチップで各セグメントの値を表示すること - 凡例をトップに表示すること - 親要素の幅に応じてチャートサイズが変わるよう対応すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
4. ApexCharts (react-apexcharts)
JSONベースの設定で直感的に記述でき、ズーム・パン・ツールバーが標準装備。stacked: trueを指定するだけで積み上げ棒グラフを実現できる。
✓ ズーム・パン標準✓ JSONベース設定✓ ダッシュボード向け
チャートを読み込み中...
特徴: stacked: trueを指定するだけで積み上げ表示に切り替わる。SSRには非対応のためdynamic importが必要。
tsx
'use client';
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
export function ApexStackedBarChart() {
const options = {
chart: { type: 'bar' as const, stacked: true, toolbar: { show: false } },
xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'] },
plotOptions: { bar: { borderRadius: 4, columnWidth: '60%' } },
dataLabels: { enabled: false },
colors: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'],
tooltip: { y: { formatter: (val: number) => val.toLocaleString() } },
};
const series = [
{ name: '製品A', data: [2400, 1398, 3200, 2800] },
{ name: '製品B', data: [1398, 2800, 1800, 3200] },
{ name: '製品C', data: [800, 1200, 1600, 2000] },
{ name: '製品D', data: [600, 900, 1100, 1400] },
];
return <Chart type="bar" options={options} series={series} height={300} width="100%" />;
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、ApexChartsを使った積み上げ棒グラフを実装してください。 - 使用ライブラリ: react-apexcharts + apexcharts - Next.js App Router環境のため dynamic import で SSR を無効化 - サンプルデータ: 4製品（製品A・B・C・D）の四半期別売上（Q1〜Q4） - chart.stacked: true で積み上げを実現 - ホバー時にツールチップで数値を表示 - 親要素の幅に合わせてレスポンシブ対応
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| ライブラリ | レンダリング | 積み上げ実装 | アニメーション | おすすめ用途 |
|---|---|---|---|---|
| Recharts | SVG | stackIdで簡単 | ◎ | Reactアプリ全般 |
| Nivo | SVG | groupModeで切替可 | ◎ | デザイン重視のダッシュボード |
| Chart.js | Canvas | stacked: trueで簡単 | ◯ | 大量データ・高パフォーマンス |
| ApexCharts | SVG | stacked: trueで簡単 | ◎ | ダッシュボード・業務アプリ全般 |
選択のポイント
- •Recharts: stackIdを各Barに指定するだけで実装可能。既存の棒グラフから積み上げへの移行コストが低い。
- •Nivo:groupMode="stacked"と"grouped"を切り替えるだけでグループ棒グラフにも変換可能。デザイン性が高くダッシュボード向け。
- •Chart.js: stacked設定がシンプルで、既にChart.jsを使用しているプロジェクトへの導入が容易。Canvas描画で大量データでも安定動作。
- •ApexCharts: JSONベースの設定で直感的に記述でき、ズーム・パン・ツールバーが標準装備。ダッシュボードや業務アプリに最適。
典型的な使用例
- 📊売上内訳分析：製品・地域・チャネル別の売上を積み上げて合計と内訳を同時に把握
- 💰予算配分の推移：部門ごとの予算消化状況を時系列で比較
- 👥ユーザー構成の変化：新規・リピーター・休眠ユーザーの比率推移を可視化
- 📈市場シェアの変動：複数プレイヤーのシェア変化を積み上げで表現
⚠️ 使用時の注意点
- •系列数は5〜6個程度に抑える（多すぎると色の識別が困難になる）
- •各セグメントの正確な値を比較したい場合はグループ棒グラフの方が適している
- •一番下の系列は比較しやすいが、上の系列ほど基準線がずれて比較が難しくなる
- •合計値の比較が目的の場合に最も効果を発揮する
積み上げ棒グラフは、棒グラフの各セグメントを積み上げて合計と内訳を同時に表現するグラフ。全体の大きさとその構成比を一度に把握できる。
月別売上の商品カテゴリ内訳・部門別コストの費目分解など、合計値と内訳の両方を見せたい場面で使われる。
主なバリエーション
- •縦積み上げ型
- •横積み上げ型
- •正規化型（100%積み上げ）
- •グループ＋積み上げ複合型
- •ラベル付き型
📊 使用しているサンプルデータ（クリックで表示）
4つの製品カテゴリー（製品A・B・C・D）の四半期別売上データを使用しています。
関連する逆引きリファレンス
- → 色・スタイルのカスタマイズ（borderColor・fillOpacity など）
- → ツールチップのカスタマイズ（カスタムHTML・フォーマッタ）
- → 軸（Axis）の設定（ラベルフォーマット・対数スケール・複数軸）
- → レスポンシブ対応（コンテナ追従・アスペクト比・リサイズ）
- → アニメーション・トランジション（初期描画・データ更新・イージング）
- → 凡例（Legend）の配置・スタイル（位置・アイコン・系列トグル）
- → データラベルの表示（値・位置・フォーマッタ）
- → クリックイベント・インタラクション（クリック・ホバー・ブラシ選択）
- → グリッド線のカスタマイズ（表示制御・線スタイル・リファレンスライン）
Zenn