Rendered chart does not fit to canvas with fixed width, resulting in a cut in the output-render on the right side
Expected behavior
I expect the generated content to fit the canvas size.
Example of there it's working, with only a few data in the dataset:
I've added a yellow background, so it's easier to see.
Current behavior
It renders a few extra pixels on the right side of the canvas, resulting in some things to be cut off, and not visible in the PNG export of the canvas.
Example of there it's not working, with more data in the chart:
Reproducible sample
GitHub Repo with Issue Reproduced: https://github.com/exetico/nodejs_chartjs_reproduce_issue_11798 (v1.0.1)
Devbox Live Example (use the invalid links), made from source-code of the repo:
https://codesandbox.io/p/devbox/node-js-chart-js-render-to-canvas-example-l828v3
Optional extra steps/info to reproduce
- Start a project with Node JS, add
"canvas": "^2.11.2"and"chart.js": "^4.4.3" - Prepare your env., so it's possible to render a PNG buffer, which are saved as a PNG file.
- Fill in data, and plenty of it (not just a few)
- See the chart overflow, if too much data
Possible solution
No response
Context
I'm generating images for a PDF file, where I use a fixed size. That's important, so it fits properly into the PDF file, without any "cutouts". The issue can be seen in the PNG render of the image.
The Chart are initiated with the following default settings:
Chart.defaults.responsive = false;
Chart.defaults.maintainAspectRatio = false;
Chart.defaults.animation = false;
I have no scale-factor set on my canvas. It's initiated with:
const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");
const chart = new Chart(ctx, configuration);
chart.js version
v4.4.3
Browser name and version
Node.js v18.18.1 (also tested with 20.12.0, which are used in Devbox)
Link to your project
https://github.com/exetico/nodejs_chartjs_reproduce_issue_11798 (v1.0.1)
Issue reproduced here: https://github.com/exetico/nodejs_chartjs_reproduce_issue_11798
Devbox example (use the invalid links):
https://codesandbox.io/p/devbox/node-js-chart-js-render-to-canvas-example-l828v3
I'd like to provide more context if needed, however, at this point I'm not really sure how to speed up the progress. I hope one of the maintainers are able to spot, what's going on.
Can I do more, to simplify the debugging-process? I do hope to see it fixed.