Chart.js折线图背景填充与画布边缘存在1px间隙问题排查

你遇到的这个1px间隙是Chart.js默认布局和坐标轴偏移逻辑导致的，试试下面几个配置调整：

• 给layout添加padding: 0，强制覆盖默认的微小内边距
• 给x、y轴都加上offset: false，关闭坐标轴的默认偏移（即使隐藏了坐标轴，这个属性仍会影响填充范围的计算）
• 可选：如果边框导致视觉间隙，可设置elements.line.borderWidth: 0或者让边框颜色与填充色一致

修改后的完整配置代码：

<Line
  data={{
    labels: convertLabelsForChart(questionsData),
    datasets: convertDataForChart(questionsData),
  }}
  options={{
    // 新增：强制布局内边距为0
    layout: {
      padding: 0
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: { display: false },
        display: false,
        // 新增：关闭y轴偏移
        offset: false
      },
      x: {
        grid: { display: false },
        display: false,
        // 新增：关闭x轴偏移
        offset: false
      },
    },
    elements: {
      point: { radius: 0 },
      line: {
        borderColor: 'rgba(17, 83, 228)',
        fill: true,
        backgroundColor: 'rgba(6, 49, 143, 1)',
        // 可选：消除边框带来的视觉间隙
        // borderWidth: 0
      },
    },
    responsive: false,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false },
    },
  }}
/>

原理说明：
Chart.js默认会给图表布局添加极小的内边距，同时坐标轴默认开启offset属性来给刻度标签预留空间——即使你隐藏了坐标轴，这个偏移逻辑依然会压缩填充区域，导致背景和画布边缘出现1px间隙。通过上面的配置可以直接覆盖这些默认行为，让填充完全贴合画布边缘。

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