Recharts/ResponsiveContainer配下のチャートが表示されない対処法

Rechartsとは

Rechartsは、Reactのチャートライブラリ。
導入が簡単で、かつ記述が楽です。

ResponsiveContainerとは

ResponsiveContainerタグでChartsタグを囲むと、チャートをレスポンシブに対応してくれる。
非常に素晴らしいタグですね。

早速ResponsiveContainerを使用してみる

公式のExampleをコピーして、実行しましたが、何も表示されませんでした。

ちなみに、コピーしたコードは以下です。

example.ts

example

  <ResponsiveContainer width={700} height="80%">
    <AreaChart data={data}
      margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip />
      <ReferenceLine x="Page C" stroke="green" label="Min PAGE" />
      <ReferenceLine y={4000} label="Max" stroke="red" strokeDasharray="3 3" />
      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
    </AreaChart>
  </ResponsiveContainer>

このままでは動作しないようです💦

公式ドキュメントをよく読むと・・・

A container component to make charts adapt to the size of parent container. One of the props width and height should be a percentage string.
訳) チャートを親コンテナのサイズに適応させるコンテナ コンポーネント。プロパティの width と height の 1 つはパーセンテージ文字列である必要があります。

どうやら、ResponsiveContainerタグを、さらに親タグで囲み、その親タグにサイズを指定することで、その親タグの情報を引き継ぐようです。

ResponsiveContainer自体がレスポンシブに対応させるというよりも、「親タグに合わせまっせ！」といった感じですね！

example

<div style={{ width: '100%', height: '250px' }}> // ←親タグにstyleを追加
  <ResponsiveContainer width={700} height="80%">
    <AreaChart data={data}
      margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip />
      <ReferenceLine x="Page C" stroke="green" label="Min PAGE" />
      <ReferenceLine y={4000} label="Max" stroke="red" strokeDasharray="3 3" />
      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
    </AreaChart>
  </ResponsiveContainer>
</div>

公式ドキュメントは偉大ということが分かりました。

一読ありがとうございます。