如何在React Apex Charts中设置柱状图标签垂直显示（+90度）？

要让水平柱状图的数值标签垂直（+90度）显示，只需在图表配置的dataLabels项中设置rotate: 90，还可通过偏移参数调整标签位置避免重叠：

核心配置代码 #

options: {
  dataLabels: {
    enabled: true,
    rotate: 90, // 设置标签旋转90度，实现垂直显示
    offsetX: -10, // 可选：向左偏移标签，避免与柱子重叠
    style: {
      fontSize: '12px',
      colors: ['#333']
    }
  },
  // 其他图表配置...
  chart: {
    type: 'bar',
    horizontal: true // 确保是水平柱状图
  }
}

完整组件示例 #

import React from 'react';
import Chart from 'react-apexcharts';

const HorizontalBarChart = () => {
  const options = {
    chart: {
      type: 'bar',
      height: 350,
      horizontal: true
    },
    dataLabels: {
      enabled: true,
      rotate: 90,
      offsetX: -10,
      style: {
        fontSize: '12px',
        colors: ['#333']
      }
    },
    xaxis: {
      categories: ['类别A', '类别B', '类别C', '类别D', '类别E']
    },
    yaxis: {
      labels: {
        style: {
          fontSize: '12px'
        }
      }
    }
  };

  const series = [
    {
      name: '数值',
      data: [1500, 1700, 1200, 2000, 1800]
    }
  ];

  return (
    <Chart options={options} series={series} type="bar" height={350} />
  );
};

export default HorizontalBarChart;

调整offsetX的数值可以进一步优化标签与柱子的间距，根据你的实际图表尺寸和数据量微调即可解决重叠问题。

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