如何让ChartJS柱状图左对齐而非居中？

你遇到的柱子居中问题是Chart.js分类轴的默认对齐逻辑，虽然你没找到align属性，但在你使用的v2版本配置里，我们可以通过调整x轴的几个参数来实现左对齐效果。

直接修改你的xAxes配置即可，具体代码调整如下：

new Chart(document.getElementById("foo"), {
  type: "bar",
  options: {
    scales: {
      yAxes: [{
        display: false,
      }],
      xAxes: [{
        display: false,
        // 添加左对齐相关配置
        barPosition: 'left',
        offset: false,
        // 可选：消除柱子间空隙，按需调整
        barPercentage: 1,
        categoryPercentage: 1
      }]
    },
    elements: {
      bar: {
        borderWidth: 2,
        borderColor: "#D2DDEC"
      },
      point: {
        hoverRadius: 0
      },
    },
    legend: {
      display: false,
    },
  },
  data: {
    labels: Object.keys(values),
    datasets: [{
      data: Object.values(values),
    }]
  }
})

关键参数说明： #

• barPosition: 'left'：强制柱子与分类标签的左侧对齐，替代默认的居中逻辑。
• offset: false：关闭轴的默认偏移，避免柱子左侧出现不必要的空白。
• barPercentage和categoryPercentage：如果柱子之间有多余空隙，可以将这两个值设为1，让柱子填满整个分类宽度（可根据视觉需求微调）。

如果是Chart.js v3+版本（配置结构改为scales.x而非xAxes），则需要在scales.x中设置align: 'left'和offset: false，但从你的代码结构判断，你使用的是v2版本，上面的配置应该能完美解决问题。

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