如何移除Chart.js Canvas的内边距与外边距？

你遇到的是Chart.js内部布局逻辑导致的间距，并非DOM元素的margin/padding，以下是针对性的修改方案：

1. 核心配置修改（更新图表options） #

在图表配置的options中添加全局布局内边距，并调整坐标轴的偏移、刻度及网格线设置：

this.myChart = new Chart("chartCanvas", {
  type: 'line',
  data: {
    labels: labelVars,
    datasets: datasets
  },
  options: {
    // 全局布局内边距设为0，消除图表内容与canvas边缘的间距
    layout: {
      padding: 0
    },
    elements: {
      point: {
        radius: 0
      },
    },
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index',
      intersect: false,
      enabled: width > 640
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    legend: {
      display: false,
      position: 'bottom',
      labels: {}
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'week',
          tooltipFormat: 'MM/DD/YYYY'
        },
        display: true,
        // 关闭空的轴标签，避免占位
        scaleLabel: {
          display: false,
          labelString: ''
        },
        ticks: {
          autoSkip: true,
          padding: 0, // 刻度标签与轴线的间距设为0
          maxTicksLimit: this.getTickLimit(),
          maxRotation: this.getRotation(),
          minRotation: this.getRotation()
        },
        gridLines: {
          display: false,
          offsetGridLines: false // 关闭网格线偏移，消除额外空间
        },
        offset: false // 关闭坐标轴偏移，让轴线贴合canvas边缘
      }],
      yAxes: [{
        display: true,
        // 关闭空的轴标签
        scaleLabel: {
          display: false,
          labelString: ''
        },
        ticks: {
          maxTicksLimit: 6,
          beginAtZero: false,
          padding: 0 // y轴刻度标签与轴线间距设为0
        },
        offset: false // 关闭y轴偏移
      }]
    }
  }
});

2. 简化CSS配置 #

确保容器和canvas完全占满空间，无额外间距：

.chartContainer {
  height: 500px;
  margin: 0;
  padding: 0;
}

#chartCanvas {
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
}

关键说明 #

• layout.padding：控制Chart.js绘制的图表内容与canvas元素边缘的整体间距，设为0可直接消除顶部外的其他方向内部间距；
• offset（坐标轴属性）：默认true会让坐标轴与canvas边缘产生偏移，设为false可让轴线贴合边缘；
• ticks.padding：控制刻度标签与轴线的距离，设为0可消除标签和轴线之间的空隙；
• offsetGridLines：关闭后网格线不会随刻度偏移，避免间接产生的间距。

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