【Next.js】rechartsでレーダーチャートを表示する際のTips

りゅうちゃん（エンジニア）

2024.10.03

IT技術

Next.js React

rechartsとは

reactでチャート表示が簡単にできるライブラリです。

利用したバージョン

recharts: 2.12.7

まずは普通に表示する

公式サンプルがあるのでそれを参考に実装するだけです。

とりあえずは以下のようなレーダーチャートを作成しました。

これを元にTipsを紹介していきます！

レーダーチャート周りの文字の表示を調整したい

割と簡単にできそうな感じはありますが、けっこう面倒な実装が必要になります。

hoge, fuga...の部分

こちらの表示はPolarAngleAxisで対応が可能です。
おおまかな変更はPolarAngleAxis自体に値を渡せば可能ですが、
x,y軸をそれぞれ変更したい場合などはレーダーチャートの特性上向きがそれぞれ違うこともあり単純にはできません。

その場合はtickにReactElement自体を渡してあげましょう。
まずはReactElement自体を実装し、

1type Props = unknown & {
2  payload?: {
3    value: string
4  }
5}
6
7export const PolarAngleAxisTick: FC = ({
8  payload,
9  ...rest
10}) => {
11  let dx = 0
12  let dy = 0
13
14  switch (payload?.value) {
15    case SUBJECT_NAME.hoge:
16      dy = -14
17      break
18    case SUBJECT_NAME.fuga:
19      dx = 4
20      dy = 4
21      break
22    case SUBJECT_NAME.foo:
23      dy = 14
24      break
25    case SUBJECT_NAME.bar:
26      dx = -4
27      dy = 4
28      break
29  }
30
31  return (
32    
33      {payload?.value}
34    
35  )
36}

最後にPolarAngleAxisに渡します。

1<PolarAngleAxis
2  dataKey="subject"
3  tick={<PolarAngleAxisTick />}
4/>

これでPolarAngleAxisTickの設定が反映され、位置や文字色などを変更することができます。

０〜５の部分

こちらはPolarRadiusAxisで対応が可能です。
PolarAngleAxis同様にtickで調整していきます。

1type Props = unknown & {
2  payload?: {
3    value: number
4  }
5}
6
7export const PolarRadiusAxisTick: FC = ({
8  payload,
9  ...rest
10}) => {
11  if (payload?.value === 0) return 
12
13  return (
14    
15      {payload?.value}
16    
17  )
18}

最後にPolarRadiusAxisに渡します。

1<PolarRadiusAxis
2  scale="linear"
3  angle={30}
4  tickCount={5}
5  domain={[0, fullMark]}
6  tick={<PolarRadiusAxisTick />}
7/>

レスポンシブ対応

サンプルのまま実装した場合でも既にレスポンシブ対応はできているように見えますが、
画面サイズによって余白が変わってしまうなどの問題があります。

これはRadarChartのouterRadiusがデフォルトで80%になっているのですが、
それによって大きさの割合が都度都度変わってしまうのが原因です。

100%にすると余白は一定になるのですが、他の表示が消えてしまう問題が発生します…

これにはRadarChartにはmarginを渡してあげることで対応できます。

1<RadarChart
2  data={data}
3  outerRadius="100%"
4  margin={{
5    top: 60,
6    right: 60,
7    bottom: 60,
8    left: 60,
9  }}
10>

これで表示が消えてしまう問題は解決しますが、
Legend（A, B）で表示されている部分がmargin設定の影響を受けていません…

この問題はLegendのcontentを使えば解決することはできるのですが、
そこまで複雑な表示というわけでもないので適当にコンポーネントを実装したほうが楽そうです。

1<div className='flex flex-col w-full min-w-48'>
2  <ResponsiveContainer aspect={1} >
3    ...
4  </ResponsiveContainer>
5  <CustomLegend data={[
6    {name: "Aデータ", colorStyle: "border-[#BCE2E8] bg-[#BCE2E8]"},
7    {name: "Bデータ", colorStyle: "border-[#F0908D] bg-[#F0908D]"}
8  ]} />
9</div>