如何将Chart.js堆叠柱状图标签左对齐并在文本过长时显示省略号

要实现x轴标签左对齐且过长文本显示省略号，只需在x轴的刻度配置里添加对应设置，以下是具体修改方案：

核心配置修改 #

在scales.x中新增ticks配置项，同时处理文本截断和对齐逻辑：

1. 左对齐设置：通过align: 'left'让标签左对齐，配合maxRotation: 0和minRotation: 0确保标签保持水平，不自动旋转。
2. 文本省略处理：两种方式可选，按需使用：
   • 方式一：利用Chart.js内置的maxWidth属性，设置标签最大宽度，超过阈值后自动截断并显示省略号。
   • 方式二：自定义callback函数，手动控制文本截断长度，适配更灵活的场景。

修改后的完整代码 #

this.chartData = {  
  labels: ['here is some very long text. even longer xxxxxxx'],
  datasets: [
    {
      label: 'set1',
      data: [],
      backgroundColor: 'red',
    },
    {
      label: 'set2', // 修正原代码语法错误：补充闭合引号
      data: [],
      backgroundColor: 'green'
    },         
  ],
};

this.chart = new Chart(canvasRef.nativeElement, {
  type: 'bar',
  data: this.chartData,
  options: {
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false,
      }            
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
        ticks: {
          align: 'left', // 标签左对齐
          maxRotation: 0, // 禁止标签旋转
          minRotation: 0,
          maxWidth: 150, // 方式一：设置标签最大宽度，自动省略过长文本
          // 方式二：自定义回调截断文本（注释方式一即可启用）
          // callback: function(value) {
          //   const maxLength = 20;
          //   return value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
          // }
        }
      },
      y: {
        stacked: true,
        beginAtZero: true,
        min: 0,
        max: 100,
        ticks: {
          callback: (value) => value + '%'
        }
      }
    }
  }
});

补充说明 #

• 使用maxWidth时，Chart.js会自动根据设定宽度截断文本并添加省略号，无需手动处理字符串。
• 自定义callback函数适合需要固定截断长度的场景，可根据需求调整maxLength数值。
• 修正了原代码中set2标签的语法错误（缺失闭合引号），避免运行时报错。

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