如何使用Chart.js实现多图表网格的左右对齐？

方案1：固定X轴左右内边距 #

直接给所有图表的X轴设置统一的左右内边距，强制锁定绘图区域的边界：

options: {
  scales: {
    x: {
      padding: {
        left: 60, // 根据你的最长标签长度调整数值
        right: 20
      }
    }
  }
}

优点是简单粗暴，立即生效；缺点是需要提前预估最长标签所需空间，若标签长度波动大，可能出现标签截断或留白过多的情况。

方案2：动态计算最长标签宽度，统一X轴尺寸 #

先算出所有图表里最长X轴标签的宽度，再给所有图表的X轴统一设置这个宽度，同时校准X轴的偏移位置：

// 收集所有图表的X轴标签
const allLabels = chartList.map(chart => chart.data.labels).flat();
// 用临时画布计算标签宽度（需和图表字体一致）
const tempCtx = document.createElement('canvas').getContext('2d');
tempCtx.font = '12px "Helvetica Neue", Helvetica, Arial, sans-serif'; // 匹配你的图表字体样式
const maxLabelWidth = Math.max(...allLabels.map(label => tempCtx.measureText(label).width));

// 给每个图表配置X轴
chartList.forEach(chart => {
  chart.options.scales.x.afterFit = function(scale) {
    scale.width = maxLabelWidth + 30; // 加余量避免标签溢出
    scale.left = 50; // 可根据布局需求设置固定左偏移，或计算居中位置
  };
  chart.update();
});

这个方案能自适应标签长度，保证所有X轴宽度一致，从根源上让网格对齐。注意必须和图表实际使用的字体样式完全匹配，否则计算的宽度会有误差。

方案3：统一图表容器的布局内边距 #

从整个图表的布局层面固定左右内边距，让所有图表的绘图区域起点和终点一致：

options: {
  layout: {
    padding: {
      left: 80,
      right: 80
    }
  }
}

这种方法不需要修改X轴的具体配置，直接从容器层面控制，适合所有图表布局一致的场景。

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