CODEWITHSUNDEEP
reactjsrecharts
Bakura
Bakura

Reputation: 161

How to change Legend text colors in recharts

I'm trying to change text Legend colors in recharts

By default, legend takes colors based on lines/bars :

exemple

And I want :

exemple2

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

Upvotes: 5

Views: 7510

Answers (2)

Josh
Josh

Reputation: 339

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.

Upvotes: 8

Kavindu Vindika
Kavindu Vindika

Reputation: 2737

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.

Upvotes: 1

Related Questions