【Recharts】Tooltipタグで出力する凡例の文字を変更する方法

はじめに

React + Rechartsで棒グラフを作成しているのですが、Tooltipタグで出力する凡例の文字変更にハマったので備忘録として残します。

デフォルトのTooltip

ToolTipタグを用いると以下のようにグラフの凡例を表示することが出来ます。

とても便利なのですが、凡例のタイトルが取得する値のプロパティ名になってしまうのです...。

Tooltipタグの要素を公式ページで色々と調べてみますがスタイルの変更は出来ても文字名の変更までは記載がない...。

むむむ、困った...。

解決法

単純でした...。
Tooltipタグの要素ではなく、データの出力を行っているBarタグのname要素に欲しい名前を付けることで解決しました。

●解決前のコード

{/* 省略 */}
<Tooltip />
<Bar dataKey="PlanedAmount" fill="#8884d8" />
<Bar dataKey="Amount" fill="#82ca9d" />
{/* 省略 */}

●解決したコード Barタグにname属性を含めています。

{/* 省略 */}
<Tooltip />
<Bar dataKey="PlanedAmount" name="予算" fill="#8884d8" />
<Bar dataKey="Amount" name="実績" fill="#82ca9d" />
{/* 省略 */}

おわりに

以上、Tooltipタグで出力する凡例の文字を変更する方法でした！