如何在ChartJS中渲染标签左对齐且位于条形上方的水平条形图？

你遇到的核心问题是没结合position属性配合anchor和align设置，以下是直接可用的配置方案：

核心配置代码 #

在图表的options中添加如下datalabels配置：

options: {
  layout: {
    padding: {
      left: 40 // 预留左侧空间，避免标签被截断
    }
  },
  plugins: {
    datalabels: {
      anchor: 'end',
      align: 'right',
      position: 'left', // 将标签定位到Y轴所在的左侧区域
      offset: 8, // 调整标签与Y轴的间距，按需修改
      clamp: true, // 强制标签不超出图表容器范围
      formatter: (value) => value // 直接返回数值，无需手动加空格
    }
  }
}

配置说明 #

• position: 'left'：指定标签整体定位在图表的左侧区域（Y轴所在侧），这是让标签贴近Y轴的关键，之前可能遗漏了这个设置
• anchor: 'end' + align: 'right'：让标签的右端对齐到Y轴的右侧边缘，实现你要的对齐效果
• offset：微调标签和Y轴之间的距离，根据你的图表尺寸调整数值
• clamp: true：防止标签因数值过长溢出到图表外部
• layout.padding.left：给左侧留出足够空间，确保标签完整显示

如果是横向条形图（bar chart），只需把position改为'top'或'bottom'，对应调整anchor和align即可适配。

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