「React × Chart.jsでおしゃれな進捗円グラフを作る方法」

---

React × Chart.js で、おしゃれな進捗円グラフをサクッと表示！

「目標に対する達成率」や「日々の進捗管理」にピッタリなUIを、react-chartjs-2 を使って爆速実装できます。

---

📌 使用ツール

• React（Next.js App Router構成）
• react-chartjs-2
• chart.js
• Tailwind CSS

---

📌 導入手順

① ライブラリをインストール

npm install chart.js react-chartjs-2

② chart.tsを作成して Chart.jsを登録

// src/lib/chart.ts
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
} from "chart.js";

ChartJS.register(ArcElement, Tooltip, Legend);

③ ProgressChart.tsxを作成

// src/components/ProgressChart.tsx
"use client";

import { Doughnut } from "react-chartjs-2";
import "@/lib/chart";

type Props = {
  progress: number; // 0〜100 の達成率
};

const ProgressChart = ({ progress }: Props) => {
  const data = {
    datasets: [
      {
        data: [progress, 100 - progress],
        backgroundColor: ["#795549", "#EAE3D8"], // 達成・未達成色
        borderWidth: 0, // グラフのボーダー
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    cutout: "75%", // 中央の空洞サイズを調整
  };

  return (
    <div className="w-4xs h-4xs">
      <Doughnut data={data} options={options} />
    </div>
  );
};

export default ProgressChart;

④ 表示したい場所で呼び出し

<ProgressChart progress={70} />

---

📌 まとめ

・chart.js 本体 + react-chartjs-2 セットで使う
・register() は lib/chart.ts にまとめて副作用管理
・cutout を使えば、円の幅も調節可能