如何在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>

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

Answer 1

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

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

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

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

结果是：