円グラフライブラリ比較

'use client';
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { name: '製品A', value: 4200 },
  { name: '製品B', value: 3800 },
  { name: '製品C', value: 2100 },
  { name: '製品D', value: 1500 },
];

const COLORS = ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'];

export function RechartsPieChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%"
          outerRadius={100} innerRadius={50} label>
          {data.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
        </Pie>
        <Tooltip />
        <Legend />
      </PieChart>
    </ResponsiveContainer>
  );
}

'use client';
import { ResponsivePie } from '@nivo/pie';

const data = [
  { id: '製品A', value: 4200, color: '#3b82f6' },
  { id: '製品B', value: 3800, color: '#10b981' },
  { id: '製品C', value: 2100, color: '#8b5cf6' },
  { id: '製品D', value: 1500, color: '#f97316' },
];

export function NivoPieChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsivePie
        data={data}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.6}
        padAngle={0.7}
        cornerRadius={3}
        activeOuterRadiusOffset={8}
        colors={{ datum: 'data.color' }}
        arcLinkLabelsSkipAngle={10}
        arcLinkLabelsThickness={2}
        arcLabelsSkipAngle={10}
      />
    </div>
  );
}

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

ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  labels: ['製品A', '製品B', '製品C', '製品D'],
  datasets: [{
    data: [4200, 3800, 2100, 1500],
    backgroundColor: [
      'rgba(59,130,246,0.8)', 'rgba(16,185,129,0.8)',
      'rgba(139,92,246,0.8)', 'rgba(249,115,22,0.8)',
    ],
    borderColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'],
    borderWidth: 2,
  }],
};

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

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

ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  labels: ['製品A', '製品B', '製品C', '製品D'],
  datasets: [{
    data: [4200, 3800, 2100, 1500],
    backgroundColor: [
      'rgba(59,130,246,0.8)', 'rgba(16,185,129,0.8)',
      'rgba(139,92,246,0.8)', 'rgba(249,115,22,0.8)',
    ],
    borderColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'],
    borderWidth: 2,
  }],
};

export function ChartJSDoughnutChart() {
  return (
    <Doughnut data={data}
      options={{ responsive: true, maintainAspectRatio: false, cutout: '60%' }}
      height={300} />
  );
}

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

export function PlotlyPieChart() {
  return (
    <Plot
      data={[{
        type: 'pie',
        labels: ['React', 'Vue', 'Angular', 'Svelte', 'その他'],
        values: [45, 25, 15, 10, 5],
        hole: 0.4,
      }]}
      layout={{
        title: { text: 'フレームワーク使用率' },
        height: 300,
        margin: { t: 40, b: 20, l: 20, 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 EChartsPieChart() {
  const option = {
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 35, name: '製品A' },
        { value: 25, name: '製品B' },
        { value: 20, name: '製品C' },
        { value: 12, name: '製品D' },
        { value: 8, name: 'その他' },
      ],
    }],
  };
  return <ReactECharts option={option} style={{ height: 300 }} />;
}

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

export function ApexPieChart() {
  const options = {
    chart: { type: 'donut' as const },
    labels: ['製品A', '製品B', '製品C', '製品D'],
    colors: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'],
    dataLabels: { enabled: true },
    legend: { position: 'bottom' as const },
    plotOptions: { pie: { donut: { size: '60%' } } },
    tooltip: { y: { formatter: (val: number) => val.toLocaleString() } },
  };
  const series = [4200, 3800, 2100, 1500];
  return <Chart type="donut" options={options} series={series} height={300} width="100%" />;
}