散布図ライブラリ比較

'use client';
import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { x: 10, y: 30 }, { x: 40, y: 100 }, { x: 60, y: 50 },
  { x: 80, y: 120 }, { x: 100, y: 80 }, { x: 120, y: 150 },
];

export function RechartsScatterChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <ScatterChart>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="x" name="X" />
        <YAxis dataKey="y" name="Y" />
        <Tooltip cursor={{ strokeDasharray: '3 3' }} />
        <Scatter data={data} fill="#3b82f6" />
      </ScatterChart>
    </ResponsiveContainer>
  );
}

'use client';
import { ResponsiveScatterPlot } from '@nivo/scatterplot';

const data = [
  {
    id: 'グループA',
    data: [
      { x: 10, y: 30 }, { x: 40, y: 100 }, { x: 60, y: 50 },
      { x: 80, y: 120 }, { x: 100, y: 80 },
    ],
  },
];

export function NivoScatterChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveScatterPlot
        data={data}
        margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
        xScale={{ type: 'linear', min: 0, max: 120 }}
        yScale={{ type: 'linear', min: 0, max: 160 }}
        colors={['#3b82f6']}
        nodeSize={10}
        useMesh={true}
      />
    </div>
  );
}

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

ChartJS.register(LinearScale, PointElement, Tooltip, Legend);

const data = {
  datasets: [
    {
      label: 'グループA',
      data: [
        { x: 10, y: 30 }, { x: 40, y: 100 }, { x: 60, y: 50 },
        { x: 80, y: 120 }, { x: 100, y: 80 }, { x: 120, y: 150 },
      ],
      backgroundColor: 'rgba(59, 130, 246, 0.7)',
    },
  ],
};

export function ChartJSScatterChart() {
  return <Scatter 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 PlotlyScatterChart() {
  return (
    <Plot
      data={[
        {
          type: 'scatter',
          mode: 'markers',
          x: [120, 200, 150, 280, 320, 180, 250, 350, 100, 220],
          y: [340, 480, 390, 620, 710, 420, 560, 780, 290, 510],
          name: '製品A',
          marker: { color: '#6366f1', size: 10 },
        },
        {
          type: 'scatter',
          mode: 'markers',
          x: [100, 180, 140, 260, 300, 160, 230, 340, 110, 200],
          y: [210, 350, 280, 440, 520, 310, 400, 580, 230, 370],
          name: '製品B',
          marker: { color: '#f59e0b', size: 10 },
        },
      ]}
      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 EChartsScatterChart() {
  const option = {
    tooltip: { trigger: 'item' },
    legend: { data: ['製品A', '製品B'], top: 'top' },
    xAxis: { type: 'value', name: '広告費（万円）' },
    yAxis: { type: 'value', name: '売上（万円）' },
    series: [
      {
        name: '製品A',
        type: 'scatter',
        data: [[120,340],[200,480],[150,390],[280,620],[320,710],[180,420],[250,560],[350,780],[100,290],[220,510]],
      },
      {
        name: '製品B',
        type: 'scatter',
        data: [[100,210],[180,350],[140,280],[260,440],[300,520],[160,310],[230,400],[340,580],[110,230],[200,370]],
      },
    ],
  };
  return <ReactECharts option={option} style={{ height: 300 }} />;
}

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

export function ApexScatterChart() {
  const options = {
    chart: { type: 'scatter' as const, toolbar: { show: false }, zoom: { enabled: true } },
    xaxis: { tickAmount: 6, labels: { formatter: (val: string) => parseFloat(val).toFixed(0) } },
    yaxis: { tickAmount: 5 },
    colors: ['#3b82f6', '#10b981'],
    dataLabels: { enabled: false },
    tooltip: { x: { show: true } },
  };
  const series = [
    { name: 'グループA', data: [[10, 30], [40, 100], [60, 50], [80, 120], [100, 80], [120, 150]] },
    { name: 'グループB', data: [[20, 60], [50, 90], [70, 40], [90, 110], [110, 70], [130, 130]] },
  ];
  return <Chart type="scatter" options={options} series={series} height={300} width="100%" />;
}