ウォーターフォールチャートライブラリ比較

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

const rawData = [
  { name: '前期末', value: 5000, type: 'total' },
  { name: '新規顧客', value: 2200, type: 'increase' },
  { name: '解約', value: -800, type: 'decrease' },
  { name: 'アップセル', value: 1500, type: 'increase' },
  { name: 'コスト増', value: -600, type: 'decrease' },
  { name: '今期末', value: 7300, type: 'total' },
];

function buildWaterfallData(data: typeof rawData) {
  let cumulative = 0;
  return data.map((d) => {
    if (d.type === 'total') {
      cumulative = d.value;
      return { ...d, base: 0, barValue: d.value };
    }
    const base = d.value < 0 ? cumulative + d.value : cumulative;
    const barValue = Math.abs(d.value);
    cumulative += d.value;
    return { ...d, base, barValue };
  });
}

const chartData = buildWaterfallData(rawData);

const getColor = (type: string) =>
  type === 'total' ? '#6b7280' : type === 'increase' ? '#10b981' : '#ef4444';

export function RechartsWaterfallChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <ComposedChart data={chartData} margin={{ top: 20, right: 20, bottom: 20, left: 60 }}>
        <CartesianGrid strokeDasharray="3 3" vertical={false} />
        <XAxis dataKey="name" tick={{ fontSize: 11 }} />
        <YAxis />
        <Tooltip formatter={(v, name) => name === 'base' ? null : [v, '金額']} />
        <Bar dataKey="base" stackId="stack" fill="transparent" />
        <Bar dataKey="barValue" stackId="stack" radius={[3, 3, 0, 0]}>
          {chartData.map((entry, i) => (
            <Cell key={i} fill={getColor(entry.type)} />
          ))}
        </Bar>
      </ComposedChart>
    </ResponsiveContainer>
  );
}

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

const nivoData = [
  { name: '前期末', base: 0, barValue: 5000, type: 'total' },
  { name: '新規顧客', base: 5000, barValue: 2200, type: 'increase' },
  { name: '解約', base: 6400, barValue: 800, type: 'decrease' },
  { name: 'アップセル', base: 6400, barValue: 1500, type: 'increase' },
  { name: 'コスト増', base: 7300, barValue: 600, type: 'decrease' },
  { name: '今期末', base: 0, barValue: 7300, type: 'total' },
];

const getColor = (type: string) =>
  type === 'total' ? '#6b7280' : type === 'increase' ? '#10b981' : '#ef4444';

export function NivoWaterfallChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveBar
        data={nivoData}
        keys={['base', 'barValue']}
        indexBy="name"
        margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
        padding={0.3}
        colors={({ id, data }: any) => id === 'base' ? 'transparent' : getColor(data.type)}
        enableLabel={false}
        axisBottom={{ tickRotation: -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);

// Chart.js floating bars: [start, end]
const labels = ['前期末', '新規顧客', '解約', 'アップセル', 'コスト増', '今期末'];

const data = {
  labels,
  datasets: [{
    label: '金額',
    data: [
      [0, 5000],
      [5000, 7200],
      [6400, 7200],
      [6400, 7900],
      [7300, 7900],
      [0, 7300],
    ],
    backgroundColor: ['#6b7280', '#10b981', '#ef4444', '#10b981', '#ef4444', '#6b7280'],
    borderSkipped: false,
    borderRadius: 3,
  }],
};

export function ChartJSWaterfallChart() {
  return (
    <Bar data={data as any}
      options={{ responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }}
      height={300} />
  );
}