ReCharts如何修改XAxis标签 旋转270度解决标签显示拥挤

直接通过XAxis组件的内置属性即可实现，不需要额外引入自定义样式或插件，配置代码如下：

// 折线图内的XAxis组件配置示例
<LineChart width={800} height={400} data={yourChartData}>
  {/* 其余组件按需求配置：Line、Tooltip、YAxis、Legend等 */}
  <XAxis
    dataKey="name" // 替换为自身项目中X轴对应的数据字段名
    angle={270} // 直接设置标签旋转角度为270°
    interval={0} // 强制展示所有数据点的标签，默认规则会自动隐藏部分标签
    textAnchor="end" // 配置文本锚点，避免旋转后标签和刻度线错位
    dx={-8} // 水平方向微调标签位置，可根据实际显示效果调整数值
    dy={12} // 垂直方向微调标签位置，避免标签和轴线、图表内容重叠
    height={130} // 给X轴区域预留足够高度，防止旋转后的长标签被容器裁切
  />
</LineChart>

配置注意事项：

• 默认X轴区域高度仅30px左右，旋转270°后标签为纵向排布，必须手动设置足够的height值，一般根据标签字符长度设置80~150px即可
• textAnchor属性必须配合旋转角度调整，270°旋转时设置为end可以让标签顶端对齐对应刻度线，不会出现位置偏移
• 如果微调后仍有轻微遮挡，可自行调整dx、dy的数值，正负值分别对应不同方向的偏移
• 如果觉得270°纵向标签阅读体验不佳，也可以把angle值改为45°做倾斜展示，其余配置逻辑完全一致，视觉上会更柔和

当前问题对应的原始拥挤效果如下：

内容的提问来源于stack exchange，提问作者StandardProc