如何在React-apexchart柱状图中实现dataLabel（数据标签）旋转效果

ApexCharts 目前没有提供原生的 dataLabel 旋转配置属性，你可以通过以下两种稳定方案实现需求：

方案1：自定义HTML标签+CSS旋转 #

这是实现成本最低的方案，适配大部分场景：

• 首先修改图表配置，开启 dataLabels 的自定义渲染：

const chartOptions = {
  chart: {
    type: 'bar',
  },
  plotOptions: {
    bar: {
      dataLabels: {
        position: 'top',
      }
    }
  },
  dataLabels: {
    enabled: true,
    formatter: (val) => {
      // 给标签添加自定义类名用于后续样式控制
      return `<span class="rotate-data-label">${val}%</span>`
    },
    // 根据旋转后的尺寸调整偏移，避免标签重叠或被截断
    offsetY: -25,
    style: {
      fontSize: '12px',
      colors: ["#222"],
    }
  },
  // 其余原有配置保持不变即可
}

• 新增全局CSS样式，控制标签旋转效果：

.rotate-data-label {
  display: inline-block;
  /* 调整角度和x轴分类标签的旋转角度保持一致即可 */
  transform: rotate(-90deg);
  transform-origin: center center;
}

方案2：使用注释（Annotations）替代原生数据标签 #

如果方案1存在布局偏移、渲染异常的问题，可以用注释组件实现，支持直接配置旋转参数：

• 首先关闭原生dataLabels，新增annotations配置：

const chartOptions = {
  dataLabels: {
    enabled: false // 关闭原生数据标签
  },
  annotations: {
    points: yourDataList.map((item, index) => ({
      x: item.category, // 对应x轴的分类名称
      y: item.value, // 对应柱子的数值
      marker: {
        size: 0 // 隐藏默认的注释标记点
      },
      label: {
        borderColor: 'transparent',
        background: 'transparent',
        offsetY: -30, // 调整标签和柱子顶部的间距
        text: `${item.percentage}%`, // 要展示的百分比文本
        rotate: -90, // 直接设置旋转角度
        style: {
          color: '#333',
          fontSize: '12px',
          padding: 0
        }
      }
    }))
  },
  // 其余原有配置保持不变
}

注意事项 #

• 若旋转后标签被图表容器裁剪，可调整grid.padding.top参数增加图表顶部的留白空间
• 旋转角度支持正负值调整，负值为逆时针旋转，正值为顺时针旋转

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