Rechartsで凡例をカスタマイズする

Rechartsを使って凡例のフォーマットを変更する必要があったので調査しました。

    <LineChart
      width={600}
      height={300}
      data={data}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend formatter={renderColorfulLegendText} />
      <Line
        type="monotone"
        dataKey="hoge"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
      <Line type="monotone" dataKey="fuga" stroke="#82ca9d" />
    </LineChart>

Legendでformatterで関数を指定すれば凡例を操作できます。

const colorList = ["#FFFFFF", "#00C49F", "#FFBB28", "#FF8042"];
const renderColorfulLegendText = (value: string, entry: any, index:　number) => {
  const color  = colorList[index];
  return <span style={{ color }}>{value}</span>;
};