折れ線グラフライブラリ比較

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

const data = [
  { month: '1月', 売上: 4200, 目標: 4000 },
  { month: '2月', 売上: 3800, 目標: 4000 },
  { month: '3月', 売上: 5100, 目標: 5000 },
  { month: '4月', 売上: 4600, 目標: 4500 },
  { month: '5月', 売上: 5400, 目標: 5000 },
  { month: '6月', 売上: 4900, 目標: 5000 },
];

export function RechartsLineChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="売上" stroke="#3b82f6" strokeWidth={2} dot={{ r: 4 }} />
        <Line type="monotone" dataKey="目標" stroke="#10b981" strokeWidth={2} strokeDasharray="5 5" />
      </LineChart>
    </ResponsiveContainer>
  );
}

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

const data = [
  {
    id: '売上',
    data: [
      { x: '1月', y: 4200 }, { x: '2月', y: 3800 }, { x: '3月', y: 5100 },
      { x: '4月', y: 4600 }, { x: '5月', y: 5400 }, { x: '6月', y: 4900 },
    ],
  },
  {
    id: '目標',
    data: [
      { x: '1月', y: 4000 }, { x: '2月', y: 4000 }, { x: '3月', y: 5000 },
      { x: '4月', y: 4500 }, { x: '5月', y: 5000 }, { x: '6月', y: 5000 },
    ],
  },
];

export function NivoLineChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveLine
        data={data}
        margin={{ top: 20, right: 110, bottom: 50, left: 60 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', min: 'auto' }}
        axisBottom={{ tickRotation: 0 }}
        colors={['#3b82f6', '#10b981']}
        pointSize={6}
        useMesh={true}
        legends={[{ anchor: 'bottom-right', direction: 'column', itemWidth: 80, itemHeight: 20 }]}
      />
    </div>
  );
}

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

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

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

const data = {
  labels,
  datasets: [
    {
      label: '売上',
      data: [4200, 3800, 5100, 4600, 5400, 4900],
      borderColor: '#3b82f6',
      backgroundColor: 'rgba(59, 130, 246, 0.1)',
      tension: 0.4,
    },
    {
      label: '目標',
      data: [4000, 4000, 5000, 4500, 5000, 5000],
      borderColor: '#10b981',
      backgroundColor: 'rgba(16, 185, 129, 0.1)',
      borderDash: [5, 5],
    },
  ],
};

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