おーみんブログ

C#, ASP.NET Core, Unityが大好きです。

トップ > React > RechartsのResponsiveContainerタグが効かない場合の対処法

RechartsのResponsiveContainerタグが効かない場合の対処法

React

はじめに

React + Rechartsでグラフを作成している際、ResponsiveContainerタグ関連でハマったので備忘録として残します。

ResponsiveContainer

ResponsiveContainerタグで囲むことで、囲まれたグラフ部分をレスポンシブ形式にすることができます。
公式説明ページを見るとResponsiveContainerタグの親要素のサイズに合わせる感じのようですね。

グラフが出ない...

最初以下のようなコードを書いており、グラフが表示されませんでした。

<Stack spacing={3}>
    <ResponsiveContainer>
        <PieChart>
            <Pie
                data={data}
                cx="50%"
                cy="50%"
                outerRadius={80}
                fill="#8884d8"
                nameKey="name"
                dataKey="value"
            >
                {data.map((entry, index) => (
                    <Cell
                        key={`cell-${index}`}
                        fill={COLORS[index % COLORS.length]}
                    />
                ))}
            </Pie>
        </PieChart>
    </ResponsiveContainer>
</Stack>

原因は単純でResponsiveContainerタグの親要素で幅の設定をしていなかったためとなります。

※公式説明ページにもある通り、ResponsiveContainerタグは親要素のスタイルを引き継ぎます。

対処法

今回の例でいうと、ResponsiveContainerタグの親要素であるStackタグへ以下のようにスタイルを追加します。

<Stack spacing={3} style={{ width: '100%', height: '250px' }}>

</Stack>

おわりに

以上、RechartsのResponsiveContainerタグが効かない場合の対処法でした！