Unremovable white border around line chart

[danielcolinjames]

Expected Behavior

Chart has no border around it when the correct option flags for hiding it are enabled.

Current Behavior

When resizing the window, a thin white border line appears.

Steps to Reproduce

1. Visit: https://codepen.io/dcj/pen/oNwqmVo?editors=0110
2. Resize browser window width
3. See thin white border appear between the chart and the div underneath it

Context

I'm using Chart.js with a React wrapper (react-chartjs-2) and trying to make the chart disappear seamlessly into the div underneath it. There is more context documented here, and here. I also tried using Chart.js directly (without the React wrapper) and that makes the line go away on the first load, but then it appears again when resizing the browser window.

Environment

• Chart.js version: 3.5.1
• Browser name and version: Chrome, version 93.0.4577.82
• Link to your project:
  • preview: https://ath-git-upgrade-packages-heliumplus.vercel.app/RED
  • code: https://github.com/danielcolinjames/ath/pull/31/files#diff-ace5c1dd018199b99cc5c5ecca00a4ca48f273e11039ffc78a5063b1596f7910

[kurkle]

Couple of notes:

• The issue only appears after resize, because you missed myChart.update() after adding a point.
• The container div should be dedicated to the chart, as noted in the docs
• This behavior comes from Use maxOverflow as minimum layout padding #8650. It can be avoided (in master) by using borderWidth: 0, but this breaks the line tension in 3.5.1 (Cubic interpolation borderWidth:0 interpolation issue #9591)

I think it would be best to let user override or disable this automatic padding.

Edit: A pen with the notes applied

[danielcolinjames]

Thanks for your detailed answer and for linking to this from the new PR @kurkle! 🙌 I'm wondering, is this new option (and new options in general) something that should get picked up automatically when using the React wrapper (react-chartjs-2), or would the maintainers of that library have to add that functionality manually? Sorry, I'm not entirely sure how wrappers like that work, and no worries if you don't know the answer.

Thanks again, really appreciate your hard work on this amazingly powerful library!