Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

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

Open exetico opened this issue 1 year ago • 3 comments

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 avatar Jun 03 '24 12:06 exetico

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

exetico avatar Jun 20 '24 12:06 exetico

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.

exetico avatar Jul 29 '24 07:07 exetico

Can I do more, to simplify the debugging-process? I do hope to see it fixed.

exetico avatar Sep 20 '24 07:09 exetico