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

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

'use client';
import dynamic from 'next/dynamic';
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

export function PlotlyLineChart() {
  return (
    <Plot
      data={[{
        type: 'scatter',
        mode: 'lines+markers',
        x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
        y: [1200, 1400, 1800, 2200, 2600, 3000, 3200, 2800],
        name: 'ユーザー数',
        line: { color: '#6366f1', width: 2 },
      }]}
      layout={{ title: { text: '月別ユーザー数推移' }, height: 300, margin: { t: 40, b: 40, l: 60, r: 20 } }}
      style={{ width: '100%' }}
      config={{ responsive: true }}
    />
  );
}

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

export function EChartsLineChart() {
  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'] },
    yAxis: { type: 'value' },
    series: [
      { name: 'ユーザー数', type: 'line', smooth: true, data: [1200, 1400, 1800, 2200, 2600, 3000, 3200, 2800] },
      { name: 'セッション数', type: 'line', smooth: true, data: [1800, 2100, 2600, 3100, 3700, 4200, 4500, 4000] },
    ],
  };
  return <ReactECharts option={option} style={{ height: 300 }} />;
}

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

export function ApexLineChart() {
  const options = {
    chart: { type: 'line' as const, toolbar: { show: false } },
    xaxis: { categories: ['1月', '2月', '3月', '4月', '5月', '6月'] },
    stroke: { curve: 'smooth' as const, width: 2 },
    markers: { size: 4 },
    dataLabels: { enabled: false },
    colors: ['#3b82f6', '#10b981'],
    tooltip: { y: { formatter: (val: number) => val.toLocaleString() } },
  };
  const series = [
    { name: '売上', data: [4200, 3800, 5100, 4600, 5400, 4900] },
    { name: '目標', data: [4000, 4000, 5000, 4500, 5000, 5000] },
  ];
  return <Chart type="line" options={options} series={series} height={300} width="100%" />;
}