Recharts | ResponsiveContainerのグラフが表示されない対応方法

Reactのグラフ表示関連のライブラリはたくさんありますが、中でも Recharts は、人気が高いです。
自分も色々と試してみましたが、とても便利です。

Recharts のグラフ表示には、グラフをレスポンシブ化してくれる便利な ResponsiveContainer タグがあります。

この、ResponsiveContainerタグの使い方は、公式サイトのExamplesに記載されている記述では、うまく表示されませんでした。

本記事では、その解決方法を記載しています。

解決方法
1. サンプル
公式サイト

解決方法

ResponsiveContainer タグは、親のプロパティーを引き継ぐため、親のタグにサイズが指定されていない場合には、表示されません。
そのため、親タグのサイズを指定すると、グラフが表示されるようになります。

親タグを引き継ぐ旨は、公式サイトに記載されています。

https://recharts.org/en-US/api/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.

サンプル

import React from 'react';
import { LineChart, Line, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

function Bar1() {


  const data = [
    {
      name: 'Page A',
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    ...
  ];

  return (
    <div style={{ width: '100%', height: '250px' }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart width={150} height={40} data={data}>
          <Bar dataKey="uv" fill="#8884d8" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

export default Bar1;