可以尝试在React.js文件中添加以下CSS代码来更改x轴标签的样式:
.apexcharts-xaxis-label {
font-size: 12px;
color: #333;
font-weight: 600;
transform: translate(0, 10px) rotate(-45deg);
}
同时,确保给出的CSS选择器与x轴标签匹配。
值得注意的是,这种方式仅适用于修改标签上的基本属性。如果希望更深入地自定义标签的样式,需要使用图表库提供的API,并根据文档进行设置。例如,在Apexchart中,可以使用以下代码自定义标签:
xaxis: {
labels: {
style: {
fontSize: '12px',
fontWeight: 600,
cssClass: 'my-xaxis-label-class'
},
},
},
其中,cssClass属性用于指定CSS类名,可以通过该类名在样式表中设置标签的自定义CSS样式。