Recharts

はじめに React + Rechartsでグラフを作成している際、ResponsiveContainerタグ関連でハマったので備忘録として残します。 ResponsiveContainer ResponsiveContainerタグで囲むことで、囲まれたグラフ部分をレスポンシブ形式にすることができます。 公式説明ページを見るとResponsiveContainerタグの親要素のサイズに合わせる感じのようですね。 グラフが出ない... 最初以下のようなコードを書いており、グラフが表示されませんでした。 <Stack spacing={3}> <ResponsiveContainer> <Pie…

はじめに Reactを用いて円グラフを書く機会があったので備忘録として記載します。 Recharts RechartsはReactベースのチャートライブラリです。 描画はSVG形式で行われます。 recharts.org 円グラフを実装してみる 以下のような円グラフを実装します。 公式のサンプルを参考に、コードを書いてみます。 export const SamplePieChart: FC = memo(() => { const data = [ { name: 'カテゴリ1', value: 100 }, { name: 'カテゴリ2', value: 200 }, { name: 'カテ…

概要 Rechartsで棒グラフ作成時、値がnullであるデータがエリア外に描画される場合がある nullが入りうるような場合は、YAxisのdomainを0が範囲内に入るように設定すると良さそう 参考にしたページ、引用元など 下記に記載しているコードは公式ドキュメントの棒グラフのサンプルをちょっとだけ変更したものです。 また、グラフ画像は同じく公式ドキュメントのcodesandboxのリンク先でコードを実行した結果のスクショです。 経緯 お仕事でRechartsを使ったグラフ描画機能を触っています。 RechartsはReactで使えるグラフ描画のためのライブラリです。 ぱっと綺麗なグラフが…