Unremovable white border around line chart (but only when using this React wrapper)

[danielcolinjames]

I'm using Chart.js with a React wrapper (react-chartjs-2). I want to upgrade to the latest major version of Chart.js (3.x) to remove the dependency on moment, among other benefits. There are lots of breaking changes in 3.x, and I've gotten nearly everything working again with all the breaking changes, except for this one infuriatingly small thing that's making me pull my hair out.

There is a tiny white border around the whole chart that I cannot for the life of me get rid of. The weird part is that it disappears when the data for the chart changes and it causes a re-render. This is what it looks like:

And this is what it's supposed to look like (seamlessly disappearing into the next div on the page):

I've tried everything I can think of to change in the options, but that thin white line is still there. The weird part is that it appears to work fine without this wrapper, so I think the issue must be some property in options not working properly in the wrapper. Here's an interactive example where it works fine using Chart.js directly: https://codepen.io/dcj/pen/oNwqmVo?editors=0110

Here's what the options look like right now:

const options = {
  hover: { intersect: false },
  borderWidth: 0,
  clip: 0,
  plugins: {
    legend: {
      position: "bottom",
      align: "center",
      display: false,
    },
    tooltip: {
      intersect: false,
      mode: "index",
      callbacks: {
        //This removes the tooltip title
        // title: function () {},
        label: ({ raw }) => {
          return `$${formatNumber(raw)}`;
        },
      },
      //this removes legend color
      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,
}

and here's a pull request with all the code in context. And you can see it in action on the deploy preview here