Chart.js：多并列条形图标签宽度不一致时的对齐与完整显示问题

针对你遇到的Y轴标签截断、左侧图表尺寸偏小的问题，直接用以下配置就能解决：

1. 统一所有图表的布局空间 #

给所有图表设置相同的左侧内边距，预留足够空间放Y轴标签，同时禁用自动比例调整，固定图表尺寸：

• 用layout.padding.left预留标签空间，数值根据你最长的标签长度调整
• 开启maintainAspectRatio: false，强制使用你设置的width和height，避免Y轴占用空间导致图表变形

2. 让Y轴标签完整显示 #

调整Y轴的刻度配置，避免标签被截断或跳过：

• 设置maxRotation: 0和minRotation: 0，让标签横向显示（不旋转）
• 开启autoSkip: false，确保所有标签都能显示出来
• 可选：如果标签太长，用ticks.callback把标签拆成换行显示

修改后的完整代码示例 #

COUNTRIES.map((country, index) => {
  return (
    <BarChart
      showLabel={index === 0}
      data={{
        labels: labels,   // 奖项名称
        datasets: [
          {
            label: country,
            data: data[index],
          },
        ]
      }}
      width={100}
      height={300}
      options={{
        indexAxis: 'y', // 横向条形图配置
        maintainAspectRatio: false,
        layout: {
          padding: {
            left: 80, // 预留足够空间放Y轴标签，按需调整数值
            right: 10,
            top: 10,
            bottom: 10
          }
        },
        scales: {
          y: {
            maxRotation: 0,
            minRotation: 0,
            autoSkip: false,
            ticks: {
              padding: 5, // 标签与Y轴的间距，提升可读性
              // 长标签换行处理（可选）
              // callback: (value) => value.split(' ').join('\n')
            }
          }
        }
      }}
    />
  )
})

额外对齐技巧 #

把所有图表放在一个flex布局的容器里，设置容器的align-items: stretch，确保所有图表高度完全一致，视觉上更整齐。

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