Chart.js堆叠水平条形图中chartjs-plugin-datalabels标签不显示问题排查求助

遇到这种标签不显示的情况，大概率是新版本Chart.js和chartjs-plugin-datalabels在堆叠条形图的位置计算逻辑上有变动，或者版本兼容没做好。我整理了几个实用的解决方案，帮你快速修复：

1. 先确认版本兼容性 #

chartjs-plugin-datalabels和Chart.js的版本必须严格匹配，不兼容的版本组合很容易出现渲染异常（这也是你降级后能正常显示的核心原因）：

• Chart.js v2.x → 搭配 chartjs-plugin-datalabels v1.x
• Chart.js v3.x → 搭配 chartjs-plugin-datalabels v2.x
• Chart.js v4.x → 搭配 chartjs-plugin-datalabels v2.2.0及以上版本

2. 调整datalabels的位置配置 #

堆叠条形图中，默认的center锚点可能因为堆叠片段的宽度计算问题，导致标签被隐藏或裁剪。可以通过以下配置修正：

• 添加clamp: false：允许标签超出条形边界，避免被自动裁剪
• 针对宽度较窄的堆叠片段，调小字体大小确保标签能放下
• 统一全局和数据集的锚点/对齐配置，避免冲突

下面是修改后的完整代码：

const testData = { set1: '4', set2: '3', set3: '1', set4: '3', };
const data = {
  labels: ["test"],
  datasets: [
    {
      label: 'set1',
      data: [testData.set1],
      backgroundColor: 'red',
      datalabels: {
        anchor: 'center',
        align: 'center',
        clamp: false // 允许标签超出边界，避免裁剪
      }
    },
    {
      label: 'set2',
      data: [testData.set2],
      backgroundColor: 'blue',
      datalabels: {
        anchor: 'center',
        align: 'center',
        clamp: false
      }
    },
    {
      label: 'set3',
      data: [testData.set3],
      backgroundColor: 'green',
      datalabels: {
        anchor: 'center',
        align: 'center',
        clamp: false,
        font: { size: 10 } // 针对窄条形调小字体
      }
    },
    {
      label: 'set4',
      data: [testData.set4],
      backgroundColor: 'gray',
      datalabels: {
        anchor: 'center',
        align: 'center',
        clamp: false
      }
    }
  ]
};
const config = {
  type: 'bar',
  data: data,
  options: {
    aspectRatio: 15 / 3,
    indexAxis: 'y',
    elements: {
      bar: {
        borderWidth: 2,
      }
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    },
    plugins: {
      datalabels: {
        color: 'white',
        font: {
          weight: 'bold'
        },
        formatter: Math.round,
        anchor: 'center', // 全局统一锚点配置
        align: 'center'
      },
      legend: {
        position: 'right',
      },
      title: {
        display: true,
        text: 'Chart.js Horizontal Bar Chart'
      },
    }
  },
};
const myChart = new Chart(
  document.getElementById('chartDemo'),
  config
);

3. 检查插件注册顺序 #

如果是通过CDN引入资源，必须确保先加载Chart.js，再加载chartjs-plugin-datalabels，否则插件无法正确注册到Chart.js实例中，导致标签不渲染。

按照上面的步骤调整后，堆叠水平条形图的标签应该就能正常显示了。

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