reactjs - 如何在 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 Prop 应该可以解决问题，但它必须有一个值，否则就没有要着色的文本。就像:

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

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

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

结果是: