ApexCharts如何配置实现底部日期标签45度/90度旋转

你只需要在现有图表配置中新增X轴刻度的旋转参数即可，无需修改原有动态labels和markers逻辑。

核心配置逻辑：在scales.x.ticks节点下设置固定旋转角度，将maxRotation和minRotation设为相同值即可强制所有底部标签按指定角度旋转。

旋转45度配置示例 #

{
  labels: [/** 动态填充的日期数据 **/],                       
  markers: {
    size: 3
  },
  // 新增X轴刻度配置
  scales: {
    x: {
      ticks: {
        minRotation: 45,
        maxRotation: 45,
        align: 'end' // 标签右对齐，避免旋转后和X轴线重叠
      }
    }
  },
  // 可选：给底部留足展示空间，避免标签被裁切
  layout: {
    padding: {
      bottom: 25
    }
  }
}

旋转90度配置 #

只需要把上述代码中minRotation和maxRotation的参数值都改为90即可：

ticks: {
  minRotation: 90,
  maxRotation: 90,
  align: 'end'
}

参数说明 #

• minRotation/maxRotation：两个值设为一致时，会强制所有标签固定旋转到对应角度，不会根据画布宽度自动调整角度
• align: 'end'：优化旋转后的标签对齐逻辑，和参考展示效果一致
• layout.padding.bottom：如果旋转后标签底部显示不全，调整这个数值给标签预留足够展示空间即可

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