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

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