エリアチャートライブラリ比較

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

const data = [
  { month: '1月', 売上: 4000, 費用: 2400 },
  { month: '2月', 売上: 3000, 費用: 1398 },
  { month: '3月', 売上: 5000, 費用: 2800 },
  { month: '4月', 売上: 4500, 費用: 3908 },
  { month: '5月', 売上: 6000, 費用: 4800 },
  { month: '6月', 売上: 5500, 費用: 3800 },
];

export function RechartsAreaChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Area type="monotone" dataKey="売上" stroke="#3b82f6" fill="#93c5fd" fillOpacity={0.6} />
        <Area type="monotone" dataKey="費用" stroke="#10b981" fill="#6ee7b7" fillOpacity={0.6} />
      </AreaChart>
    </ResponsiveContainer>
  );
}

'use client';
import { ResponsiveLine } from '@nivo/line';

const data = [
  {
    id: '売上',
    data: [
      { x: '1月', y: 4000 }, { x: '2月', y: 3000 }, { x: '3月', y: 5000 },
      { x: '4月', y: 4500 }, { x: '5月', y: 6000 }, { x: '6月', y: 5500 },
    ],
  },
];

export function NivoAreaChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveLine
        data={data}
        margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', min: 0 }}
        enableArea={true}
        areaOpacity={0.4}
        axisBottom={{ tickRotation: 0 }}
        colors={['#3b82f6']}
        pointSize={6}
        useMesh={true}
      />
    </div>
  );
}

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

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

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

const data = {
  labels,
  datasets: [
    {
      label: '売上',
      data: [4000, 3000, 5000, 4500, 6000, 5500],
      borderColor: '#3b82f6',
      backgroundColor: 'rgba(59, 130, 246, 0.3)',
      fill: true,
    },
  ],
};

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

'use client';
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

export function ApexAreaChart() {
  const options = {
    chart: { type: 'area' as const, toolbar: { show: false } },
    xaxis: { categories: ['1月', '2月', '3月', '4月', '5月', '6月'] },
    stroke: { curve: 'smooth' as const, width: 2 },
    dataLabels: { enabled: false },
    fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.5, opacityTo: 0.1 } },
    colors: ['#3b82f6', '#10b981'],
    tooltip: { y: { formatter: (val: number) => val.toLocaleString() } },
  };
  const series = [
    { name: '売上', data: [4000, 3000, 5000, 4500, 6000, 5500] },
    { name: '費用', data: [2400, 1398, 2800, 3908, 4800, 3800] },
  ];
  return <Chart type="area" options={options} series={series} height={300} width="100%" />;
}