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>
参考