ChartJS：移除刻度标签导致的图表右侧内边距问题

这个坑我之前踩过！其实就是Chart.js默认的坐标轴偏移逻辑在搞鬼——为了给y轴标签预留空间，它会自动把图表往左边推，留出右侧空白。要在保留刻度的同时让图表完全贴合canvas边缘，只需要调整几个核心配置项就行，针对最新版本的Chart.js（v3及以上）给你具体方案：

关键配置调整 #

• 关闭y轴的偏移设置
  Chart.js的y轴默认有offset: true，这个属性会强制给坐标轴标签留出外部空间，直接把它设为false就能让图表紧贴右侧边缘。
• 移除容器内边距
  确保layout.padding设为0，避免图表本身和容器之间有额外空白。
• 优化刻度标签间距（可选）
  如果设置后y轴标签被容器边缘截断，可以微调ticks.padding来控制标签和轴线的距离，或者给layout.padding.right加个很小的值（比如5），平衡贴合度和标签可读性。

完整代码示例 #

const myLineChart = new Chart(document.getElementById('myLineChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: '数据趋势',
      data: [12, 19, 3, 5, 2],
      borderColor: '#36A2EB',
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false, // 如需自定义容器宽高可开启
    layout: {
      padding: 0 // 彻底移除图表内边距
    },
    scales: {
      y: {
        offset: false, // 核心：关闭y轴偏移，让图表紧贴右侧
        ticks: {
          padding: 6, // 可选：调整标签与轴线距离，防止截断
          beginAtZero: true
        }
      },
      x: {
        offset: false, // 若想x轴也贴合左侧边缘可设置
      }
    },
    // 不需要图例的话建议关闭，节省空间
    plugins: {
      legend: {
        display: false
      }
    }
  }
});

额外注意事项 #

• 确保你的容器div已经设置了明确的宽高（比如width: 100%; height: 400px;），配合responsive: true让图表自适应容器。
• 如果是使用Chart.js v2版本的老项目，配置结构略有不同，需要把scales.y改成scales.yAxes数组形式：

scales: {
  yAxes: [{
    offset: false,
    ticks: {
      padding: 6
    }
  }],
  xAxes: [{
    offset: false
  }]
}

这样调整后，折线图就能完美贴合容器边缘，同时y轴刻度也能正常显示啦！

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