chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.9k stars 11.88k forks source link

Rendered chart does not fit to canvas with fixed width, resulting in a cut in the output-render on the right side #11798

Open exetico opened 4 weeks ago

exetico commented 4 weeks ago

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:

billede

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:

billede

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

1) Start a project with Node JS, add "canvas": "^2.11.2" and "chart.js": "^4.4.3" 2) Prepare your env., so it's possible to render a PNG buffer, which are saved as a PNG file. 3) Fill in data, and plenty of it (not just a few) 4) 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)

exetico commented 1 week ago

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