API側でデータを準備してあげて、Doughnutのdataに登録する。

'use client';

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

ChartJS.register(ArcElement, Tooltip, Legend);

const options = {
  plugins: {
    legend: {
      labels: {
        padding: 8,
      },
    },
  },
};

export const Container = (): JSX.Element => {
  const { data } = useGetMeDashboard();

  if (!data) {
    return <LinearLoading />;
  }

  const labels = data.categoryItemCounts
    ? data.categoryItemCounts.map((item) => item.categoryName)
    : ['データなし'];
  const datasetsData = data.categoryItemCounts
    ? data.categoryItemCounts.map((item) => item.itemCount)
    : [1];
  const categoryItemCountsLength = data.categoryItemCounts?.length ?? 1;
  const baseColor = data.categoryItemCounts ? '#F9BD46' : '#FDE08F';

  // pieChartData作成
  const pieChartData: ChartData<'doughnut'> = {
    labels,
    datasets: [
      {
        data: datasetsData,
        backgroundColor: generateBackgroundColors(
          baseColor,
          categoryItemCountsLength
        ),
        borderWidth: 1,
        spacing: 2,
      },
    ],
  };

  <Doughnut
    data={pieChartData}
    options={{
      ...options,
      maintainAspectRatio: true, // アスペクト比を維持
      responsive: true, // レスポンシブ対応
    }}
  />;
};