はじめに

学習アプリや筋トレ系のアプリを作成する際に実施した時間を項目別にグラフで表現したいな思う時があったので円グラフの実装の仕方をまとめました。
これをベースにしてDBから取得したデータを表示するなど改造していけると思います。
今回はRechartというライブラリを使用しました。

Rechartとは

Recharts は React 向けの簡単でカスタマイズ可能なチャートライブラリです。特に、React のコンポーネントベースの設計にマッチしており、直感的に使えるのが特徴です。このライブラリを使用すると、円グラフ、棒グラフ、折れ線グラフなどさまざまなデータビジュアライゼーションを簡単に作成できます。

円グラフの実装方法

では、実際に Recharts を使って円グラフを実装するコードを見ていきましょう。以下の手順に沿って進めていきます。

必要なパッケージのインストール
基本的な円グラフコンポーネントの作成
グラフにデータっを与えて表示

1.必要なパッケージのインストール

まず、Recharts をプロジェクトに追加しましょう。以下のコマンドを使用してインストールできます。

npm install recharts

2.円グラフコンポーネントの作成

次に、Recharts の PieChart コンポーネントを使って、円グラフを作成します。基本的なコードは以下のようになります。

import React from 'react';
import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';
import './chart.css';

const data = [
  { name: 'Group A', value: 400 },
  { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 },
  { name: 'Group D', value: 200 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

export const SimplePieChart = () => {
  return (
    <div className="chart-container">
      <PieChart width={400} height={400}>
        <Pie
          data={data}
          cx={200}
          cy={200}
          outerRadius={150}
          fill="#8884d8"
          dataKey="value"
          label
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Tooltip />
        <Legend />
      </PieChart>
    </div>
  );
};

グラフにデータを与えて表示

上記のコードでは、まずデータセットを定義し、それを Pie コンポーネントに渡しています。このデータは円グラフの各部分に対応し、value プロパティで各部分のサイズを決定します。また、Cell コンポーネントを使うことで、各セクションに異なる色を設定することができます。

PieChart と Pie のプロパティについて簡単に説明します。

data：グラフに表示するデータ
outerRadius：円グラフの半径
dataKey：データからグラフに使用するキーを指定します
label：各部分のラベルを表示するかどうか

完成図