CODEWITHSUNDEEP
reactjsrecharts
Chau Loi
Chau Loi

Reputation: 1225

How to change the colour of YAxis label of recharts in Reactjs

I am working on a 2 y-axis chart. I want the Y-axis label having the same color with tick color. But I still not able to do it

<ComposedChart height={300} data={chart_data}>
    <CartesianGrid ... />
    <XAxis ..... />
    <YAxis .....
           label={{ .... fill:'#FDF652' }} />    #Fill here not working 
     <YAxis ....  
           label={{ .... fill:'#535184'}} />     #Fill here not working 
     <Tooltip ......... />

     <Area fill="#8884d8"/>           #Fill here working
     <Bar  fill="#535184" ..../>      #Fill here working
     <Legend ............ />
</ComposedChart>

When I add fill in Area and Bar it works and has color. But when I add fill in <YAxis label> it is not working

Upvotes: 5

Views: 10477

Answers (1)

Orlyyn
Orlyyn

Reputation: 2606

If by label you mean the axis title, the fill props should do the trick, but it must have a value, otherwise there is no text to color. Just like:

<YAxis label={{ value: 'test', fill: 'red' }} />

In order to color the the tick lines and the tick labels, you can use the props tick and tickLine respectively, just like this:

<YAxis tick={{ fill: 'red' }} tickLine={{ stroke: 'red' }} />

That results in:

enter image description here

Upvotes: 13

Related Questions