I'm trying to change text Legend colors in recharts
By default, legend takes colors based on lines/bars :
And I want :
Seems like what I want was the previous default setting, because doc explain us how to have colorful legend texts : https://codesandbox.io/s/legend-formatter-rmzp9 https://recharts.org/en-US/api/Legend
I can't find how to do the reverse
Ran into the same issue, solution is to the use the formatter:
<Legend
formatter={(value, entry, index) => <span className="text-color-class">{value}</span>}
/>
The span returned from this function only renders in place of the text portion of the legend, the coloured shapes (circles in your example) aren't effected.
You can change the stroke prop of both Line components as follows. Codesandbox example given here.
stroke="#FF0000" refers to red color and stroke="#000000" refers to black color.
<Line
type="monotone"
dataKey="pv"
stroke="#FF0000"
activeDot={{ r: 8 }}
/>
<Line type="monotone" dataKey="uv" stroke="#000000" />
Hope this would answer your question.
I didn't find solution to do it with recharts and payload attribute. But you can use CSS to directly target the icon and change his color, like with class: legend-item-0 and recharts-symbols