如何在 Reactjs 中更改图表的 YAxis 标签的颜色

Question

我正在制作 2 y 轴图表。我想要 Y 轴标签具有与刻度颜色相同的颜色。但是我还是做不到

<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>

当我在 Area 和 Bar 中添加 fill 时，它起作用并且有颜色。但是当我在 <YAxis label> 中添加 fill 时，它不起作用

Answer 1

如果标签是指轴标题，fill 道具应该可以解决问题，但它必须有一个值，否则没有要着色的文本。就像：

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

为了给刻度线和刻度标签着色，你可以分别使用道具 tick 和 tickLine，就像这样：

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

这导致：

如何在 Reactjs 中更改图表的 YAxis 标签的颜色

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

reactjs

recharts