ApexCharts垂直柱状图如何将数据标签置于图表中心？

在ApexCharts的垂直柱状图中，希望将数据标签显示在柱子中心位置，尝试修改plotOptions->dataLabels的position属性为center后，未达到预期效果。

实际显示效果 #

期望显示效果 #

当前配置代码 #

var options = {
  series: [{
    data: dataChart
  }],
  chart: {
    type: 'bar',
    height: 1000
  },
  plotOptions: {
    bar: {
      barHeight: '100%',
      horizontal: false,
      dataLabels: {
        position: 'center',
        orientation: 'vertical',
      },
    }
  },
  dataLabels: {
    enabled: true,
  },
  xaxis: {
    type : "category" ,
    categories: dataLabel,
    labels: {
      show: false,
    },
  }
};

解决方案 #

调整以下配置项即可实现数据标签居中：

1. 修正语法错误：原配置中存在多余的闭合大括号和逗号，先修正这些语法问题避免配置失效。
2. 添加垂直偏移调整：在plotOptions.bar.dataLabels中增加offsetY属性，根据柱子高度微调数值，确保标签垂直居中；同时设置style.textAlign: 'center'保证文字水平对齐。
3. 优化文字样式：可按需调整dataLabels.style中的字体大小等样式，让标签显示更适配。

修改后的完整配置代码：

var options = {
  series: [{
    data: dataChart
  }],
  chart: {
    type: 'bar',
    height: 1000
  },
  plotOptions: {
    bar: {
      barHeight: '100%',
      horizontal: false,
      dataLabels: {
        position: 'center',
        orientation: 'vertical',
        offsetY: -5, // 根据实际柱子高度调整此值
        style: {
          textAlign: 'center'
        }
      },
    }
  },
  dataLabels: {
    enabled: true,
    style: {
      fontSize: '12px'
    }
  },
  xaxis: {
    type : "category" ,
    categories: dataLabel,
    labels: {
      show: false,
    },
  }
};

如果offsetY的数值需要更精确，可通过图表的onReady事件获取柱子实际尺寸后动态计算调整。

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