React + Rechartsで円グラフを表示する！

はじめに

Reactを用いて円グラフを書く機会があったので備忘録として記載します。

Recharts

RechartsはReactベースのチャートライブラリです。

描画はSVG形式で行われます。
recharts.org

円グラフを実装してみる

以下のような円グラフを実装します。

公式のサンプルを参考に、コードを書いてみます。

export const SamplePieChart: FC = memo(() => {
    const data = [
        { name: 'カテゴリ1', value: 100 },
        { name: 'カテゴリ2', value: 200 },
        { name: 'カテゴリ3', value: 300 },
    ];

    const COLORS = [
        '#0088FE',
        '#00C49F',
        '#FFBB28'
    ];
    
    // ラベル名
    const renderCustomizedLabel = ({ name }: any) => {
        return name;
    };

    return (
        <Stack spacing={3} style={{ width: '100%', height: '250px' }}>
            <ResponsiveContainer>
                <PieChart>
                    <Pie
                        data={data}
                        cx="50%"
                        cy="50%"
                        outerRadius={80}
                        fill="#8884d8"
                        nameKey="name"
                        dataKey="value"
                        label={renderCustomizedLabel}
                        style={{ fontSize: '11px' }}
                    >
                        {data.map((entry, index) => (
                            <Cell
                                key={`cell-${index}`}
                                fill={COLORS[index % COLORS.length]}
                            />
                        ))}
                    </Pie>
                </PieChart>
            </ResponsiveContainer>
        </Stack>
    );
});

おわりに

以上、Rechartsを用いた円グラフ生成の備忘録でした！