積み上げ棒グラフライブラリ比較

3つの人気ライブラリで積み上げ棒グラフを表示し、実装方法とスタイルを比較

rechartsv3.7.0 @nivo/corev0.99.0 chart.jsv4.5.1 react-chartjs-2v5.3.1

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

4つの製品カテゴリー（製品A・B・C・D）の四半期別売上データを使用しています。

[
  {
    "quarter": "Q1",
    "productA": 1200,
    "productB": 800,
    "productC": 600,
    "productD": 400
  },
  {
    "quarter": "Q2",
    "productA": 1500,
    "productB": 950,
    "productC": 750,
    "productD": 500
  },
  {
    "quarter": "Q3",
    "productA": 1800,
    "productB": 1100,
    "productC": 900,
    "productD": 620
  },
  {
    "quarter": "Q4",
    "productA": 2100,
    "productB": 1300,
    "productC": 1050,
    "productD": 750
  }
]

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で小さいセルのラベルを自動非表示にすること
- 凡例を表示すること
- 親要素の幅に応じてチャートサイズが変わるよう対応すること

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を指定して積み上げを実現すること
- ホバー時にツールチップで各セグメントの値を表示すること
- 凡例をトップに表示すること
- 親要素の幅に応じてチャートサイズが変わるよう対応すること

ライブラリ比較

ライブラリ	レンダリング	積み上げ実装	アニメーション	おすすめ用途
Recharts	SVG	stackIdで簡単	◎	Reactアプリ全般
Nivo	SVG	groupModeで切替可	◎	デザイン重視のダッシュボード
Chart.js	Canvas	stacked: trueで簡単	◯	大量データ・高パフォーマンス

選択のポイント

•Recharts: stackIdを各Barに指定するだけで実装可能。既存の棒グラフから積み上げへの移行コストが低い。
•Nivo: groupMode="stacked"と"grouped"を切り替えるだけでグループ棒グラフにも変換可能。デザイン性が高くダッシュボード向け。
•Chart.js: stacked設定がシンプルで、既にChart.jsを使用しているプロジェクトへの導入が容易。Canvas描画で大量データでも安定動作。