Chart.js 3.x迁移问题：首次加载时图表四周出现细白边/内边距

问题描述 #

基于react-chartjs-2封装调用Chart.js，升级至3.x版本完成大部分适配后，首次加载时图表四周会出现细小白边，数据变更触发重渲染后白边自动消失，预期可与后续页面元素无缝衔接。

问题效果 #

预期效果 #

已尝试配置 #

按照官方升级指南替换废弃的zeroLine*配置为脚本化grid配置，仅解决了零刻度线灰色问题，底部、右侧仍残留约1px留白：

grid: {
  color: () => "transparent"
}

现有完整options配置如下：

const options = {
  hover: { intersect: false },
  borderWidth: 0,
  clip: 0,
  plugins: {
    legend: {
      position: "bottom",
      align: "center",
      display: false,
    },
    tooltip: {
      intersect: false,
      mode: "index",
      callbacks: {
        label: ({ raw }) => {
          return `$${formatNumber(raw)}`;
        },
      },
      displayColors: false,
      padding: 15,
      position: "average",
      pointHitRadius: 20,
      pointRadius: 30,
      caretSize: 10,
      backgroundColor: "rgba(255,255,255,.9)",
      borderColor: rgbaStringFromRGBObj(palette.Vibrant.rgb, 0.35),
      borderWidth: 2,
      bodyFont: {
        family: "Satoshi",
        size: 18,
      },
      bodyColor: "#303030",
      titleFont: {
        family: "Satoshi",
      },
      titleColor: "rgba(0,0,0,0.6)",
    },
  },
  scales: {
    y: {
      ticks: {
        backdropPadding: 0,
        display: false,
      },
      stacked: false,
      grid: {
        drawBorder: false,
        borderWidth: 0,
        drawTicks: false,
        color: "transparent",
        width: 0,
      },
      drawBorder: false,
      drawTicks: false,
    },
    x: {
      padding: 0,
      ticks: {
        display: false,
        padding: 0,
        mirror: true,
        backdropPadding: 0,
      },
      grid: {
        drawBorder: false,
        drawTicks: false,
        display: false,
      },
      drawBorder: false,
      drawTicks: false,
    },
  },
  maintainAspectRatio: false,
}

解决方法 #

该白边是Chart.js 3.x默认全局布局内边距导致，在options根节点新增layout.padding配置设为0即可：

const options = {
  // 保留原有所有配置，新增以下字段
  layout: {
    padding: 0
  }
}

如果仍有残留白边，可在数据集配置中新增borderWidth: 0，或全局配置elements.line.borderWidth = 0。若首次渲染仍偶发异常，可在组件挂载后手动调用图表实例的update方法触发一次重绘：

const chartRef = useRef(null);
useEffect(() => {
  chartRef.current?.chartInstance.update();
}, []);

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