Chart.js多图表垂直堆叠对齐问题求助

方法1：固定Y轴标签宽度（Chart.js 3.0+） #

直接给所有图表的Y轴刻度标签设置统一固定宽度，强制标签占用相同空间，确保图表绘图区域对齐：

options: {
  scales: {
    y: {
      ticks: {
        minWidth: 80, // 可根据最长标签调整这个值
        maxWidth: 80, // 直接固定宽度，消除标签长度差异的影响
        align: 'right' // 标签右对齐，保证绘图区域左边缘完全对齐
      }
    }
  }
}

方法2：预留统一左侧内边距 #

如果不想限制标签宽度，可给所有图表的布局预留足够的左侧空间，容纳最长的Y轴标签，同时固定Y轴位置：

options: {
  layout: {
    padding: {
      left: 100 // 根据实际最长标签的宽度调整
    }
  },
  scales: {
    y: {
      position: 'left',
      grid: {
        drawOnChartArea: true // 确保网格从绘图区域左侧开始
      }
    }
  }
}

方法3：通过外层容器控制 #

给每个图表的外层容器设置统一的左侧内边距，让图表的绘图区域自动对齐：

.chart-wrapper {
  width: 100%;
  padding-left: 120px; /* 预留Y轴标签的空间 */
  box-sizing: border-box;
}

初始化图表时开启响应式：

new Chart(document.getElementById('your-chart'), {
  type: 'bar', // 替换为你使用的图表类型
  data: { /* 你的数据内容 */ },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});

以上三种方法都能解决Y轴标签宽度不同导致的图表不对齐问题，可根据需求选择使用。

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