如何移除Chart.js中Canvas元素的左右内边距？

数据老陈

2026-5-20

解决Chart.js Canvas内部左右内边距问题

我之前也踩过这个坑！光设置padding: 0确实没效果，因为Chart.js的坐标轴默认会给首尾预留间距，还有几个关键配置得一起调整，试试下面这些方法：

彻底关闭布局内边距：确保layout.padding的四个方向都明确设为0，避免简写可能带来的遗漏：

const chart = new Chart(ctx, {
  type: 'line', // 替换成你的实际图表类型
  data: yourChartData,
  options: {
    layout: {
      padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    },
    // 其他配置项...
  }
});

关闭X轴的偏移属性：这是核心！Chart.js默认给X轴开启了offset: true，会强制让第一个和最后一个数据点与轴边缘产生间距，把它改成false就能让数据和轴首尾对齐：

options: {
  scales: {
    x: {
      offset: false,
      // 如果不需要X轴网格线，也可以关掉，进一步消除视觉上的间距感
      grid: {
        display: false
      }
    }
  },
  // 其他配置项...
}

移除轴的额外留白：如果上面两步做完还有残留间距，检查下X轴的grace属性——它会给轴的两端自动添加额外空间，把值设为0即可：
```
options: {
  scales: {
    x: {
      grace: 0
    }
  }
}
```
针对条形/柱状图的额外调整：如果你用的是条形或柱状图，还可以调整柱子的占比参数，让柱子完全填满类别空间：
```
options: {
  scales: {
    x: {
      barPercentage: 1,
      categoryPercentage: 1
    }
  }
}
```