如何将水平条形图的dataLabels定位到条形右侧

要让水平条形图的dataLabels完全显示在条形右侧，只需调整plotOptions.bar.dataLabels的偏移量和对齐方式，具体修改如下：

修改后的配置代码 #

this.chart = {
  series: [
    {
      name: 'Sample',
      data: [37.9, 21.8, 8.6],
    },
  ],
  chart: {
    type: 'bar',
    fontFamily: "'Plus Jakarta Sans', sans-serif;",
    foreColor: '#adb0bb',
    height: 380,
    stacked: true,
    toolbar: {
      show: false,
    },
  },
  plotOptions: {
    bar: {
      horizontal: true,
      borderRadius: 4,
      columnWidth: '40%',
      barHeight: '40%',
      endingShape: 'rounded',
      dataLabels: {
        position: 'end',
        offsetX: 10, // 关键：向右偏移标签，确保完全在条形外
        textAnchor: 'start' // 确保文字左对齐，避免被截断
      },
    },
  },
  markers: {
    size: 3,
  },
  stroke: {
    curve: 'straight',
    width: '0',
  },
  colors: ['#763EBD'],
  legend: {
    show: true,
  },
  grid: {
    show: true,
    strokeDashArray: 0,
    borderColor: 'rgba(0,0,0,0.1)',
    xaxis: {
      lines: {
        show: true,
      },
    },
    yaxis: {
      lines: {
        show: true,
      },
    },
  },
  xaxis: {
    type: 'category',
    categories: ['Label 1', 'Label 2', 'Label 3'],
  },
  tooltip: {
    theme: 'dark',
  },
  dataLabels: {
    enabled: true,
    formatter: function (val: number) {
      return val.toString().concat('%');
    },
    style: {
      colors: ['#000'],
    },
  },
};

关键修改说明 #

• offsetX: 10：针对水平条形图，正值会让标签向右偏移，你可以根据实际条形宽度调整这个数值（比如8、12），直到标签完全显示在条形右侧。
• textAnchor: 'start'：设置文字左对齐，确保标签内容不会因为偏移而被截断或显示不全。

之前尝试没生效的原因大概率是offsetX的数值设置不合理，或者没有配合textAnchor来保证文字对齐方向，调整这两个参数就能解决标签半内半外的问题。

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