← カテゴリ一覧に戻る

棒グラフライブラリ比較

3つの人気ライブラリで同じデータを表示し、実装方法とスタイルを比較

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

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

6ヶ月分の月別売上と目標のデータを使用しています。

[
  {
    "month": "1月",
    "sales": 4200,
    "target": 4000
  },
  {
    "month": "2月",
    "sales": 3800,
    "target": 4000
  },
  {
    "month": "3月",
    "sales": 5100,
    "target": 5000
  },
  {
    "month": "4月",
    "sales": 4600,
    "target": 4500
  },
  {
    "month": "5月",
    "sales": 5400,
    "target": 5000
  },
  {
    "month": "6月",
    "sales": 4900,
    "target": 5000
  }
]

1. Recharts (shadcn/ui風)

React向けの宣言的なチャートライブラリ。shadcn/uiのChartsコンポーネントもRechartsをベースにしています。

✓ React向け✓ 宣言的✓ カスタマイズ容易
特徴: Reactコンポーネントとして実装でき、JSXで直感的に記述可能。 アニメーションやインタラクションが標準で組み込まれています。
tsx
'use client';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { month: '1月', sales: 4200, target: 4000 },
  { month: '2月', sales: 3800, target: 4000 },
  { month: '3月', sales: 5100, target: 5000 },
  { month: '4月', sales: 4600, target: 4500 },
  { month: '5月', sales: 5400, target: 5000 },
  { month: '6月', sales: 4900, target: 5000 },
];

export function RechartsBarChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="sales" fill="#3b82f6" name="売上" radius={[4, 4, 0, 0]} />
        <Bar dataKey="target" fill="#10b981" name="目標" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Rechartsを使った棒グラフを実装してください。
- 使用ライブラリ: recharts の BarChart
- サンプルデータ: 6ヶ月分の月別売上と目標値
- ホバー時にツールチップで数値を表示
- 凡例を表示
- 親要素の幅に合わせてレスポンシブ対応
- X軸に月名、Y軸に売上金額を表示

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

2. Nivo

D3.jsベースの高品質なReactチャートライブラリ。美しいデザインとアニメーションが特徴。

✓ D3.jsベース✓ 美しいデザイン✓ アニメーション豊富
特徴: D3.jsの強力な機能を活かしつつ、Reactで簡単に使用可能。 洗練されたデフォルトのデザインとスムーズなアニメーションが魅力。
tsx
'use client';
import { ResponsiveBar } from '@nivo/bar';

const data = [
  { month: '1月', sales: 4200, target: 4000 },
  { month: '2月', sales: 3800, target: 4000 },
  { month: '3月', sales: 5100, target: 5000 },
  { month: '4月', sales: 4600, target: 4500 },
  { month: '5月', sales: 5400, target: 5000 },
  { month: '6月', sales: 4900, target: 5000 },
];

export function NivoBarChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveBar
        data={data}
        keys={['sales', 'target']}
        indexBy="month"
        margin={{ top: 20, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        groupMode="grouped"
        colors={['#3b82f6', '#10b981']}
        borderRadius={4}
        legends={[{
          dataFrom: 'keys',
          anchor: 'bottom-right',
          direction: 'column',
          itemWidth: 100,
          itemHeight: 20,
        }]}
      />
    </div>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Nivoを使った棒グラフを実装してください。
- 使用ライブラリ: @nivo/bar の ResponsiveBar
- サンプルデータ: 6ヶ月分の月別売上と目標値
- ホバー時にツールチップで数値を表示
- 凡例を表示
- 親要素の幅に合わせてレスポンシブ対応
- X軸に月名、Y軸に売上金額を表示

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

3. Chart.js (react-chartjs-2)

最も人気のあるJavaScriptチャートライブラリの一つ。シンプルで軽量、豊富なドキュメント。

✓ 軽量✓ 豊富なドキュメント✓ 高パフォーマンス
特徴: Canvas APIを使用しているため高パフォーマンス。 大量のデータポイントを扱う場合に特に効果的。react-chartjs-2でReactでも簡単に利用可能。
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 = ['1月', '2月', '3月', '4月', '5月', '6月'];

const data = {
  labels,
  datasets: [
    {
      label: '売上',
      data: [4200, 3800, 5100, 4600, 5400, 4900],
      backgroundColor: 'rgba(59, 130, 246, 0.8)',
    },
    {
      label: '目標',
      data: [4000, 4000, 5000, 4500, 5000, 5000],
      backgroundColor: 'rgba(16, 185, 129, 0.8)',
    },
  ],
};

export function ChartJSBarChart() {
  return <Bar data={data} options={{ responsive: true, maintainAspectRatio: false }} height={300} />;
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Chart.jsを使った棒グラフを実装してください。
- 使用ライブラリ: react-chartjs-2 の Bar
- サンプルデータ: 6ヶ月分の月別売上と目標値
- ホバー時にツールチップで数値を表示
- 凡例を表示
- 親要素の幅に合わせてレスポンシブ対応
- X軸に月名、Y軸に売上金額を表示

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

ライブラリレンダリング学習コストカスタマイズ性おすすめ用途
RechartsSVG低高React アプリ全般
NivoSVG中高デザイン重視のダッシュボード
Chart.jsCanvas低中大量データ・高パフォーマンス

選択のポイント

  • •Recharts: Reactプロジェクトで標準的なチャートが必要な場合。 shadcn/uiと組み合わせる場合にも最適。
  • •Nivo: デザイン性を重視し、美しいアニメーションが欲しい場合。 ダッシュボードやプレゼンテーション向け。
  • •Chart.js: 大量のデータポイントを扱う場合や、 パフォーマンスが重要な場合。広く使われているため情報も豊富。

同じカテゴリの他のページ

エリアチャート

面グラフ（エリアチャート）の実装サンプル。Recharts・Chart.jsなどを使った塗りつぶしエリアによるトレンド可視化の比較。

ボックスプロット

ボックスプロット（箱ひげ図）の実装サンプル。Nivo・Chart.jsを使ったデータ分布と外れ値の可視化比較。

バブルチャート（Bubble Chart）

バブルチャートの実装サンプル。Recharts・Chart.js・Nivoを使った3変数（X軸・Y軸・バブルサイズ）の同時可視化比較。

同じライブラリを使っているページ

エリアチャート

recharts@nivo/corechart.jsreact-chartjs-2

ボックスプロット

@nivo/corechart.jsreact-chartjs-2

バブルチャート（Bubble Chart）

recharts@nivo/corechart.jsreact-chartjs-2
このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo