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

'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>
  );
}

'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>
  );
}

'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} />
  );
}