Chart.js：堆叠水平条形图的Y轴标签换行问题

方法1：用内置ticks.callback拆分标签 #

不用自定义插件，直接在Y轴配置里通过回调把带换行符的字符串拆成数组，Chart.js会自动将数组渲染为多行标签：

options: {
  scales: {
    y: {
      stacked: true,
      ticks: {
        callback: function(value) {
          // 把\n分隔的字符串拆成数组
          return value.split('\n');
        }
      }
    },
    x: {
      stacked: true
    }
  }
}

如果你的原始标签本身就是数组（比如['Test1', 'line2']），直接返回数组即可，无需split操作。之前修改标签后图表不显示条形，大概率是回调返回了无效格式（比如undefined或非字符串/数组），务必确保回调返回内容符合Chart.js的识别要求。

方法2：配合样式调整确保换行生效 #

若方法1效果不佳，可补充设置标签旋转角度和内边距，避免标签重叠或显示不全：

options: {
  scales: {
    y: {
      stacked: true,
      ticks: {
        callback: (value) => value.split('\n'),
        maxRotation: 0, // 强制不旋转标签
        minRotation: 0,
        padding: 10 // 增加标签间距，避免换行后重叠
      }
    }
  }
}

排查条形消失的问题 #

你修改标签后条形不显示，通常是这两个原因：

• 回调函数返回了非预期内容（比如对象而非字符串/数组），导致Chart.js无法匹配标签与数据集；
• 修改标签时误打乱了数据集data与Y轴标签的索引对应关系，堆叠条形图要求每个数据集的data长度必须和Y轴标签长度完全一致。

完整示例代码 #

<canvas id="stackedBar"></canvas>

<script>
const ctx = document.getElementById('stackedBar').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Test1\nline2', 'Test2\nline3', 'Test3\nline4'],
    datasets: [
      {
        label: '数据集1',
        data: [10, 20, 30],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      },
      {
        label: '数据集2',
        data: [15, 25, 35],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }
    ]
  },
  options: {
    indexAxis: 'y', // 启用水平条形图
    scales: {
      y: {
        stacked: true,
        ticks: {
          callback: (value) => value.split('\n'),
          maxRotation: 0,
          minRotation: 0,
          padding: 8
        }
      },
      x: {
        stacked: true
      }
    }
  }
});
</script>

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