ファンネルチャートライブラリ比較

3つの人気ライブラリでファンネルチャートを表示し、コンバージョンフローの実装方法とスタイルを比較

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

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

ECサイトのコンバージョンファネル（訪問〜購入完了までの5段階）のデータを使用しています。

[
  {
    "stage": "サイト訪問",
    "value": 10000,
    "rate": 100
  },
  {
    "stage": "商品閲覧",
    "value": 6800,
    "rate": 68
  },
  {
    "stage": "カート追加",
    "value": 3200,
    "rate": 32
  },
  {
    "stage": "購入手続き",
    "value": 1800,
    "rate": 18
  },
  {
    "stage": "購入完了",
    "value": 950,
    "rate": 9.5
  }
]

1. Recharts

RechartsにはFunnelChartコンポーネントが標準搭載されており、データを渡すだけで自動的にファンネル形状を描画。LabelListで各ステージの値やラベルを簡単に表示でき、アニメーションも標準対応。

✓ FunnelChart標準搭載✓ 宣言的API✓ アニメーション

特徴: FunnelChartコンポーネントが標準搭載されており追加パッケージ不要。 Reactプロジェクトで最も手軽に導入でき、LabelListを使ってステージ名や数値を自在に配置できる。

tsx

'use client';
import { FunnelChart, Funnel, LabelList, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { value: 10000, name: '訪問者', fill: '#3b82f6' },
  { value: 6000, name: '興味あり', fill: '#6366f1' },
  { value: 3000, name: '検討中', fill: '#8b5cf6' },
  { value: 1200, name: 'カート追加', fill: '#a855f7' },
  { value: 500, name: '購入完了', fill: '#d946ef' },
];

export function RechartsFunnelChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <FunnelChart>
        <Tooltip />
        <Funnel dataKey="value" data={data} isAnimationActive>
          <LabelList position="right" fill="#333" stroke="none" dataKey="name" />
        </Funnel>
      </FunnelChart>
    </ResponsiveContainer>
  );
}

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

React + Tailwind CSSで、Rechartsを使ったファンネルチャートを実装してください。

- 使用ライブラリ: recharts（FunnelChart・Funnel・LabelList・Tooltip・ResponsiveContainer）
- サンプルデータ: ECサイトのコンバージョンファネル5段階（訪問→商品閲覧→カート追加→決済開始→購入完了）を用意すること
- LabelListを使ってステージ名と数値をチャート上に表示すること
- ホバー時にツールチップで各段階のユーザー数を表示すること
- 親要素の幅に応じてチャートサイズが変わるよう対応すること
- 各段階を異なる色（グラデーション）で表示すること

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

2. Nivo

@nivo/funnelパッケージでファンネルチャートをネイティブサポート。beforeSeparatorHeightやafterSeparatorHeightでステージ間の区切りをカスタマイズ可能。ホバー時のインタラクションやカスタムツールチップも充実。

✓ D3.jsベース✓ 美しいデザイン✓ インタラクティブ

特徴: D3.jsベースの滑らかなファンネル形状と豊富なアニメーション。ホバー時にステージが拡大するインタラクションやカスタムツールチップで洗練されたダッシュボードを実現できる。

tsx

'use client';
import { ResponsiveFunnel } from '@nivo/funnel';

const data = [
  { id: 'visitors', value: 10000, label: '訪問者' },
  { id: 'interested', value: 6000, label: '興味あり' },
  { id: 'considering', value: 3000, label: '検討中' },
  { id: 'cart', value: 1200, label: 'カート追加' },
  { id: 'purchased', value: 500, label: '購入完了' },
];

export function NivoFunnelChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveFunnel
        data={data}
        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
        valueFormat=">-.0f"
        colors={['#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef']}
        borderWidth={20}
        labelColor={{ from: 'color', modifiers: [['brighter', 3]] }}
        beforeSeparatorLength={100}
        beforeSeparatorOffset={20}
        afterSeparatorLength={100}
        afterSeparatorOffset={20}
      />
    </div>
  );
}

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

React + Tailwind CSSで、Nivoを使ったファンネルチャートを実装してください。

- 使用ライブラリ: @nivo/funnel（ResponsiveFunnel）
- サンプルデータ: ECサイトのコンバージョンファネル5段階（訪問→商品閲覧→カート追加→決済開始→購入完了）を用意すること
- beforeSeparatorLength・afterSeparatorLengthでステージ間の区切りをカスタマイズすること
- motionConfigでアニメーションを設定すること
- ホバー時にステージが拡大するインタラクションを活用すること
- 親要素の幅に応じてチャートサイズが変わるよう対応すること

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

Chart.jsにはファンネルの専用チャートタイプはないが、横棒グラフ（Bar）を中央揃えにするカスタム実装でファンネル風の表現が可能。もしくはchartjs-chart-funnelプラグインを使用することでネイティブに近い実装ができる。

✓ Canvas描画✓ 軽量✓ カスタム実装

特徴: 積み上げ横棒グラフの左側を透明にすることでファンネル風の中央揃え表示を実現。既にChart.jsを使用しているプロジェクトではプラグイン（chartjs-chart-funnel）を追加するだけで正式なファンネルチャートにも対応可能。

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 stages = ['訪問者', '興味あり', '検討中', 'カート追加', '購入完了'];
const values = [10000, 6000, 3000, 1200, 500];
const maxValue = Math.max(...values);

const data = {
  labels: stages,
  datasets: [
    {
      label: 'パディング',
      data: values.map((v) => (maxValue - v) / 2),
      backgroundColor: 'transparent',
      stack: 'stack',
    },
    {
      label: 'コンバージョン数',
      data: values,
      backgroundColor: ['#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef'],
      stack: 'stack',
    },
  ],
};

export function ChartJSFunnelChart() {
  return (
    <Bar data={data}
      options={{
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: false,
        scales: { x: { stacked: true }, y: { stacked: true } },
        plugins: { legend: { display: false } },
      }}
      height={300} />
  );
}

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

React + Tailwind CSSで、Chart.jsを使ったファンネル風チャートを実装してください。

- 使用ライブラリ: chart.js（CategoryScale・LinearScale・BarElement・Tooltip・Legend）、react-chartjs-2（Bar）
- サンプルデータ: ECサイトのコンバージョンファネル5段階（訪問→商品閲覧→カート追加→決済開始→購入完了）を用意すること
- 横棒グラフ（indexAxis: "y"）を積み上げ表示し、左側を透明にして中央揃えのファンネル風表現を実現すること
- ホバー時にツールチップで各段階のユーザー数を表示すること（透明バーは非表示）
- 各段階を異なる色で表示すること

ライブラリ比較

ライブラリ	レンダリング	ファンネル対応	インタラクション	おすすめ用途
Recharts	SVG	◎ 標準搭載	◯	Reactアプリ全般
Nivo	SVG	◎ 専用パッケージ	◎	デザイン重視のダッシュボード
Chart.js	Canvas	△ プラグイン or カスタム	◯	既存Chart.jsプロジェクト

選択のポイント

•Recharts: FunnelChartが標準搭載されており追加パッケージ不要。Reactプロジェクトで最も手軽に導入できる。
•Nivo: @nivo/funnelで洗練されたデザインのファンネルを実現。ステージ間のアニメーションやインタラクションが豊富でプレゼンテーション向け。
•Chart.js: 専用サポートはないが、既にChart.jsを使用しているプロジェクトではプラグインを追加するだけで対応可能。