複合グラフライブラリ比較

3つの人気ライブラリで棒グラフと折れ線グラフを組み合わせた複合グラフを表示し、実装方法とスタイルを比較

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

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

6ヶ月分の月別売上（棒グラフ）と目標達成率（折れ線グラフ）を組み合わせたデータを使用しています。

[
  {
    "month": "1月",
    "sales": 4200,
    "cost": 2800,
    "rate": 82
  },
  {
    "month": "2月",
    "sales": 3800,
    "cost": 2500,
    "rate": 75
  },
  {
    "month": "3月",
    "sales": 5100,
    "cost": 3200,
    "rate": 95
  },
  {
    "month": "4月",
    "sales": 4600,
    "cost": 2900,
    "rate": 88
  },
  {
    "month": "5月",
    "sales": 5400,
    "cost": 3400,
    "rate": 102
  },
  {
    "month": "6月",
    "sales": 4900,
    "cost": 3100,
    "rate": 92
  }
]

1. Recharts (shadcn/ui風)

ComposedChartコンポーネントの中にBar・Line・Areaを自由に組み合わせられる。YAxis idを指定することで左右に異なるスケールの軸を持つ二軸グラフも簡単に実現。Rechartsの中でも最も柔軟なコンポーネント。

✓ ComposedChart対応✓ 宣言的API✓ 二軸対応

特徴: ComposedChartが専用コンポーネントとして用意されており、最も直感的に複合グラフを実装できる。二軸も宣言的に記述可能。

tsx

'use client';
import {
  ComposedChart, Bar, Line, Area, XAxis, YAxis,
  CartesianGrid, Tooltip, Legend, ResponsiveContainer,
} from 'recharts';

const data = [
  { month: '1月', sales: 4200, cost: 2400, rate: 80 },
  { month: '2月', sales: 3800, cost: 1800, rate: 72 },
  { month: '3月', sales: 5100, cost: 2800, rate: 92 },
  { month: '4月', sales: 4600, cost: 2200, rate: 85 },
  { month: '5月', sales: 5400, cost: 3000, rate: 96 },
  { month: '6月', sales: 4900, cost: 2500, rate: 88 },
];

export function RechartsComposedChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <ComposedChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis yAxisId="left" />
        <YAxis yAxisId="right" orientation="right" domain={[0, 100]} />
        <Tooltip />
        <Legend />
        <Area yAxisId="left" type="monotone" dataKey="cost" fill="#bfdbfe" stroke="#3b82f6" name="コスト" />
        <Bar yAxisId="left" dataKey="sales" fill="#10b981" name="売上" />
        <Line yAxisId="right" type="monotone" dataKey="rate" stroke="#f97316" strokeWidth={2} name="達成率(%)" />
      </ComposedChart>
    </ResponsiveContainer>
  );
}

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

React + Tailwind CSSで、Rechartsを使った複合グラフを実装してください。

- 使用ライブラリ: recharts の ComposedChart、Bar、Line、YAxis（yAxisId指定）、ResponsiveContainer
- サンプルデータ: 6ヶ月分の月別売上・コスト・達成率のデータを用意すること
- 複合表示: 棒グラフ（売上・コスト）と折れ線グラフ（達成率）を同一チャートに重ねて表示すること
- 二重軸: 売上・コストと達成率で異なるY軸スケールを使用すること（yAxisId="left"/"right"）
- インタラクティブ: ホバー時にツールチップで各系列の数値を表示すること
- レスポンシブ: ResponsiveContainerで親要素の幅に応じてチャートサイズが変わるよう対応すること

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

2. Nivo

Nivoには複合グラフ専用コンポーネントはないが、ResponsiveBarのlayersプロパティにカスタムレイヤーを追加することで折れ線を重ねる実装が可能。もしくはResponsiveLineとResponsiveBarをCSSで重ねるアプローチも有効。

✓ D3.jsベース✓ 美しいデザイン✓ レイヤー合成

特徴: 専用コンポーネントはないがカスタムレイヤーで柔軟に対応可能。デザインの一貫性を保ちつつ独自の表現ができる。

tsx

'use client';
import { ResponsiveBar } from '@nivo/bar';

const data = [
  { month: '1月', sales: 4200, cost: 2400 },
  { month: '2月', sales: 3800, cost: 1800 },
  { month: '3月', sales: 5100, cost: 2800 },
  { month: '4月', sales: 4600, cost: 2200 },
  { month: '5月', sales: 5400, cost: 3000 },
  { month: '6月', sales: 4900, cost: 2500 },
];

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

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

React + Tailwind CSSで、Nivoを使った複合グラフを実装してください。

- 使用ライブラリ: @nivo/bar の ResponsiveBar、layersプロパティにカスタムSVGレイヤーを追加
- サンプルデータ: 6ヶ月分の月別売上・コスト・達成率のデータを用意すること
- 複合表示: ResponsiveBarのlayersにカスタムレイヤー関数を渡し、棒グラフの上に折れ線グラフを重ねて表示すること
- インタラクティブ: ホバー時にツールチップで各系列の数値を表示すること
- レスポンシブ: ResponsiveBarで親要素の幅に応じてチャートサイズが変わるよう対応すること

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

datasetsの各系列にtype: "bar"またはtype: "line"を個別指定するだけで複合グラフを実現。yAxisIDで系列ごとに異なる軸に紐付けることができ、二軸グラフも直感的に実装できる。

✓ Canvas描画✓ typeを系列ごとに指定✓ 二軸対応

特徴: datasetsにtypeを指定するだけのシンプルな実装。既にChart.jsを導入済みのプロジェクトへの追加コストが低い。

tsx

'use client';
import { Chart } from 'react-chartjs-2';
import {
  Chart as ChartJS, CategoryScale, LinearScale,
  BarElement, LineElement, PointElement,
  Title, Tooltip, Legend,
} from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend);

const labels = ['1月', '2月', '3月', '4月', '5月', '6月'];

const data = {
  labels,
  datasets: [
    {
      type: 'bar' as const,
      label: '売上',
      data: [4200, 3800, 5100, 4600, 5400, 4900],
      backgroundColor: 'rgba(16, 185, 129, 0.8)',
      yAxisID: 'y',
    },
    {
      type: 'bar' as const,
      label: 'コスト',
      data: [2400, 1800, 2800, 2200, 3000, 2500],
      backgroundColor: 'rgba(59, 130, 246, 0.8)',
      yAxisID: 'y',
    },
    {
      type: 'line' as const,
      label: '達成率(%)',
      data: [80, 72, 92, 85, 96, 88],
      borderColor: '#f97316',
      borderWidth: 2,
      yAxisID: 'y2',
    },
  ],
};

export function ChartJSComposedChart() {
  return (
    <Chart type="bar" data={data as any}
      options={{
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: { position: 'left' },
          y2: { position: 'right', min: 0, max: 100 },
        },
      }}
      height={300} />
  );
}

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

React + Tailwind CSSで、Chart.js（react-chartjs-2）を使った複合グラフを実装してください。

- 使用ライブラリ: react-chartjs-2 の Chart コンポーネント、chart.js の CategoryScale・LinearScale・BarElement・LineElement・PointElement
- サンプルデータ: 6ヶ月分の月別売上・コスト・達成率のデータを用意すること
- 複合表示: datasetsの各系列にtype: "bar"またはtype: "line"を個別指定して棒グラフと折れ線グラフを組み合わせること
- 二重軸: yAxisIDで売上・コスト（y）と達成率（y1）を異なる軸に紐付けること
- インタラクティブ: ホバー時にツールチップで各系列の数値を表示すること
- レスポンシブ: responsive: true、maintainAspectRatio: falseで親要素に合わせたサイズにすること

ライブラリ比較

ライブラリ	レンダリング	複合の実装方法	二軸対応	おすすめ用途
Recharts	SVG	ComposedChartで宣言的	◎	Reactアプリ全般
Nivo	SVG	カスタムレイヤーで合成	△	デザイン重視のダッシュボード
Chart.js	Canvas	type個別指定で簡単	◎	大量データ・高パフォーマンス