使用Chart.js v3如何将堆叠条形图的y轴标签设置为左对齐

直接修改图表配置中Y轴的ticks相关参数即可实现，不需要引入额外插件，具体配置如下：

• 找到配置项中的options.scales.y节点，在ticks属性下添加两个配置：
  • align: 'start'：指定标签文本的对齐基准为左对齐
  • crossAlign: 'left'：设置标签相对于Y轴轴线的水平对齐方向为左
• 可额外配置padding参数调整标签和轴线之间的间距，适配展示效果

完整配置示例：

const ctx = document.getElementById('stackedBar').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['标签1', '标签2', '标签3', '标签4'],
    datasets: [
      // 你的数据集配置，堆叠属性设为true即可
      { label: '系列1', data: [10, 20, 30, 40], backgroundColor: '#ff0000' },
      { label: '系列2', data: [15, 25, 35, 45], backgroundColor: '#00ff00' }
    ]
  },
  options: {
    indexAxis: 'y', // 横向堆叠条形图需要指定该参数，纵向堆叠可删除此行
    scales: {
      x: { stacked: true },
      y: {
        stacked: true,
        ticks: {
          align: 'start',
          crossAlign: 'left',
          padding: 10 // 按需调整间距数值
        }
      }
    }
  }
});

效果参考：

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