バブルチャートライブラリ比較

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

const divisionA = [
  { sales: 1200, profit: 18, share: 15 },
  { sales: 850,  profit: 12, share: 8  },
  { sales: 2100, profit: 25, share: 22 },
  { sales: 450,  profit: 8,  share: 4  },
];

const divisionB = [
  { sales: 1680, profit: 20, share: 17 },
  { sales: 950,  profit: 15, share: 10 },
  { sales: 720,  profit: 6,  share: 6  },
  { sales: 3200, profit: 30, share: 28 },
];

export function RechartsBubbleChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <ScatterChart>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis type="number" dataKey="sales" name="売上高" unit="万円"
          label={{ value: '売上高（万円）', position: 'insideBottom', offset: -5, fontSize: 11 }} />
        <YAxis type="number" dataKey="profit" name="利益率" unit="%"
          label={{ value: '利益率（%）', angle: -90, position: 'insideLeft', fontSize: 11 }} />
        <ZAxis type="number" dataKey="share" name="市場シェア" unit="%" range={[50, 1000]} />
        <Tooltip cursor={{ strokeDasharray: '3 3' }} />
        <Legend verticalAlign="top" />
        <Scatter name="事業部A" data={divisionA} fill="#3b82f6" fillOpacity={0.6} />
        <Scatter name="事業部B" data={divisionB} fill="#10b981" fillOpacity={0.6} />
      </ScatterChart>
    </ResponsiveContainer>
  );
}

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

const data = [
  {
    id: '事業部A',
    data: [
      { x: 1200, y: 18, share: 15 },
      { x: 850,  y: 12, share: 8  },
      { x: 2100, y: 25, share: 22 },
      { x: 450,  y: 8,  share: 4  },
    ],
  },
  {
    id: '事業部B',
    data: [
      { x: 1680, y: 20, share: 17 },
      { x: 950,  y: 15, share: 10 },
      { x: 720,  y: 6,  share: 6  },
      { x: 3200, y: 30, share: 28 },
    ],
  },
];

export function NivoBubbleChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveScatterPlot
        data={data}
        margin={{ top: 20, right: 120, bottom: 60, left: 70 }}
        xScale={{ type: 'linear', min: 0, max: 'auto' }}
        yScale={{ type: 'linear', min: 0, max: 'auto' }}
        nodeSize={(datum: any) => datum.data.share * 1.5 + 5}
        axisBottom={{ legend: '売上高（万円）', legendPosition: 'middle', legendOffset: 46 }}
        axisLeft={{ legend: '利益率（%）', legendPosition: 'middle', legendOffset: -56 }}
        colors={['#3b82f6', '#10b981']}
        useMesh={false}
        legends={[{ anchor: 'bottom-right', direction: 'column', itemWidth: 80, itemHeight: 20 }]}
      />
    </div>
  );
}

'use client';
import { Bubble } 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: 1200, y: 18, r: 15 * 0.6 + 3 },
        { x: 850,  y: 12, r: 8  * 0.6 + 3 },
        { x: 2100, y: 25, r: 22 * 0.6 + 3 },
        { x: 450,  y: 8,  r: 4  * 0.6 + 3 },
      ],
      backgroundColor: 'rgba(59, 130, 246, 0.5)',
      borderColor: 'rgba(59, 130, 246, 1)',
    },
    {
      label: '事業部B',
      data: [
        { x: 1680, y: 20, r: 17 * 0.6 + 3 },
        { x: 950,  y: 15, r: 10 * 0.6 + 3 },
        { x: 720,  y: 6,  r: 6  * 0.6 + 3 },
        { x: 3200, y: 30, r: 28 * 0.6 + 3 },
      ],
      backgroundColor: 'rgba(16, 185, 129, 0.5)',
      borderColor: 'rgba(16, 185, 129, 1)',
    },
  ],
};

export function ChartJSBubbleChart() {
  return (
    <Bubble data={data} options={{
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: { title: { display: true, text: '売上高（万円）' } },
        y: { title: { display: true, text: '利益率（%）' } },
      },
    }} height={300} />
  );
}

'use client';
import {
  VictoryChart, VictoryScatter, VictoryAxis,
  VictoryTooltip, VictoryLegend, VictoryTheme,
} from 'victory';

const dataA = [
  { x: 1200, y: 18, z: 15 },
  { x: 850,  y: 12, z: 8  },
  { x: 2100, y: 25, z: 22 },
  { x: 450,  y: 8,  z: 4  },
];

const dataB = [
  { x: 1680, y: 20, z: 17 },
  { x: 950,  y: 15, z: 10 },
  { x: 720,  y: 6,  z: 6  },
  { x: 3200, y: 30, z: 28 },
];

export function VictoryBubbleChart() {
  return (
    <VictoryChart theme={VictoryTheme.clean} height={280}
      padding={{ top: 20, bottom: 60, left: 70, right: 40 }}>
      <VictoryLegend x={60} y={5} orientation="horizontal" gutter={20}
        data={[
          { name: '事業部A', symbol: { fill: 'rgba(59,130,246,0.6)' } },
          { name: '事業部B', symbol: { fill: 'rgba(16,185,129,0.6)' } },
        ]} />
      <VictoryAxis label="売上高（万円）"
        style={{ axisLabel: { padding: 40 } }} />
      <VictoryAxis dependentAxis label="利益率（%）"
        style={{ axisLabel: { padding: 50 } }} />
      <VictoryScatter bubbleProperty="z" maxBubbleSize={25} minBubbleSize={5}
        data={dataA}
        style={{ data: { fill: 'rgba(59,130,246,0.6)', stroke: '#3b82f6', strokeWidth: 1.5 } }}
        labelComponent={<VictoryTooltip />}
        labels={({ datum }) => `売上高: ${datum.x}万円 利益率: ${datum.y}%`} />
      <VictoryScatter bubbleProperty="z" maxBubbleSize={25} minBubbleSize={5}
        data={dataB}
        style={{ data: { fill: 'rgba(16,185,129,0.6)', stroke: '#10b981', strokeWidth: 1.5 } }}
        labelComponent={<VictoryTooltip />}
        labels={({ datum }) => `売上高: ${datum.x}万円 利益率: ${datum.y}%`} />
    </VictoryChart>
  );
}

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

export function ApexBubbleChart() {
  const options = {
    chart: { type: 'bubble' as const, toolbar: { show: false } },
    xaxis: { title: { text: '売上高（万円）' }, min: 0, max: 3500 },
    yaxis: { title: { text: '利益率（%）' }, min: 0, max: 35 },
    colors: ['#3b82f6', '#10b981'],
    fill: { opacity: 0.6 },
    dataLabels: { enabled: false },
    tooltip: { z: { title: '市場シェア: ' } },
  };
  const series = [
    { name: '事業部A', data: [[1200, 18, 15], [850, 12, 8], [2100, 25, 22], [450, 8, 4]] },
    { name: '事業部B', data: [[1680, 20, 17], [950, 15, 10], [720, 6, 6], [3200, 30, 28]] },
  ];
  return <Chart type="bubble" options={options} series={series} height={300} width="100%" />;
}