Recharts Tooltipの数値をフォーマットする

RechartのTooltipの数値をフォーマットする際に迷ったので備忘録。

Tooltipのフォーマット

Rechartでは、Tooltipを使うと、マウスオーバで数値の詳細が確認できるようになる。

<BarChart>
  <Tooltip />
</BarChart>

表示される数値は、formatter propに関数を渡せばフォーマットできる。

<BarChart>
  <Tooltip formatter={(value) => new Intl.NumberFormat('ja-JP', {maximumFractionDigits: 0}).format(value)} />
</BarChart>

TypeScrpitの場合は、valueを数値に変換してNumberFormat.formatに渡せばok

<BarChart>
  <Tooltip formatter={(value) => new Intl.NumberFormat('ja-JP', {maximumFractionDigits: 0}).format(+value)} />
</BarChart>

変数に名前を付ける場合は、[formatted_value, name]の配列を返す

<BarChart>
  <Tooltip formatter={(value, name) => [new Intl.NumberFormat('ja-JP', {maximumFractionDigits: 0}).format(+value), idToLabelMap.get(name)]} />
</BarChart>

参考