5

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

1
  • Canyou share the link of reproducible example for eg: CodeSandbox ? Commented Jan 12, 2022 at 7:38

1 Answer 1

12

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.