複合グラフライブラリ比較

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

const data = [
  { month: '1月', sales: 4200, cost: 2400, rate: 80 },
  { month: '2月', sales: 3800, cost: 1800, rate: 72 },
  { month: '3月', sales: 5100, cost: 2800, rate: 92 },
  { month: '4月', sales: 4600, cost: 2200, rate: 85 },
  { month: '5月', sales: 5400, cost: 3000, rate: 96 },
  { month: '6月', sales: 4900, cost: 2500, rate: 88 },
];

export function RechartsComposedChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <ComposedChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis yAxisId="left" />
        <YAxis yAxisId="right" orientation="right" domain={[0, 100]} />
        <Tooltip />
        <Legend />
        <Area yAxisId="left" type="monotone" dataKey="cost" fill="#bfdbfe" stroke="#3b82f6" name="コスト" />
        <Bar yAxisId="left" dataKey="sales" fill="#10b981" name="売上" />
        <Line yAxisId="right" type="monotone" dataKey="rate" stroke="#f97316" strokeWidth={2} name="達成率(%)" />
      </ComposedChart>
    </ResponsiveContainer>
  );
}

'use client';
import { ResponsiveBar } from '@nivo/bar';

const data = [
  { month: '1月', sales: 4200, cost: 2400 },
  { month: '2月', sales: 3800, cost: 1800 },
  { month: '3月', sales: 5100, cost: 2800 },
  { month: '4月', sales: 4600, cost: 2200 },
  { month: '5月', sales: 5400, cost: 3000 },
  { month: '6月', sales: 4900, cost: 2500 },
];

export function NivoComposedChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveBar
        data={data}
        keys={['sales', 'cost']}
        indexBy="month"
        margin={{ top: 20, right: 80, bottom: 50, left: 70 }}
        padding={0.3}
        groupMode="grouped"
        colors={['#10b981', '#3b82f6']}
        borderRadius={4}
        legends={[{
          dataFrom: 'keys',
          anchor: 'bottom-right',
          direction: 'column',
          itemWidth: 60,
          itemHeight: 20,
        }]}
      />
    </div>
  );
}

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

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

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

const data = {
  labels,
  datasets: [
    {
      type: 'bar' as const,
      label: '売上',
      data: [4200, 3800, 5100, 4600, 5400, 4900],
      backgroundColor: 'rgba(16, 185, 129, 0.8)',
      yAxisID: 'y',
    },
    {
      type: 'bar' as const,
      label: 'コスト',
      data: [2400, 1800, 2800, 2200, 3000, 2500],
      backgroundColor: 'rgba(59, 130, 246, 0.8)',
      yAxisID: 'y',
    },
    {
      type: 'line' as const,
      label: '達成率(%)',
      data: [80, 72, 92, 85, 96, 88],
      borderColor: '#f97316',
      borderWidth: 2,
      yAxisID: 'y2',
    },
  ],
};

export function ChartJSComposedChart() {
  return (
    <Chart type="bar" data={data as any}
      options={{
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: { position: 'left' },
          y2: { position: 'right', min: 0, max: 100 },
        },
      }}
      height={300} />
  );
}

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

export function ApexComposedChart() {
  const options = {
    chart: { type: 'line' as const, toolbar: { show: false } },
    xaxis: { categories: ['1月', '2月', '3月', '4月', '5月', '6月'] },
    yaxis: [
      { title: { text: '金額（万円）' }, seriesName: '売上' },
      { opposite: true, title: { text: '達成率（%）' }, seriesName: '達成率(%)', min: 0, max: 100 },
    ],
    stroke: { width: [0, 0, 3], curve: 'smooth' as const },
    dataLabels: { enabled: false },
    colors: ['#10b981', '#3b82f6', '#f97316'],
    tooltip: { shared: true },
    legend: { show: true },
  };
  const series = [
    { name: '売上', type: 'bar', data: [4200, 3800, 5100, 4600, 5400, 4900] },
    { name: 'コスト', type: 'bar', data: [2400, 1800, 2800, 2200, 3000, 2500] },
    { name: '達成率(%)', type: 'line', data: [80, 72, 92, 85, 96, 88] },
  ];
  return <Chart type="line" options={options} series={series} height={300} width="100%" />;
}