chartjs / chartjs/Chart.js

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

Open
#11,798 3 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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](https://github.com/chartjs/Chart.js/assets/3549445/1cc83fea-ecf0-49c2-b6a9-c227c2f6ae69)

_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](https://github.com/chartjs/Chart.js/assets/3549445/f3174f50-4d78-4e27-90e1-508f864fb73f)

### Reproducible sample

GitHub Repo with Issue Reproduced:
https://github.com/exetico/nodejs_chartjs_reproduce_issue_11798 ([v1.0.1](https://github.com/exetico/nodejs_chartjs_reproduce_issue_11798/releases/tag/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:
```js
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:

```js
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](https://github.com/exetico/nodejs_chartjs_reproduce_issue_11798/releases/tag/v1.0.1))

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.