Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

fix: Unwanted white gap between bar border and bar fill (chartjs#12094) #12117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
minjibak wants to merge 4 commits into chartjs:master
base: master
Choose a base branch
Loading
from minjibak:12094-bar-gap-issue

Conversation

@minjibak
Copy link

@minjibak minjibak commented Sep 4, 2025

Changes

  • Applied pixel snapping in inflateRect function in element.bar.js
  • Fixed white pixel gaps that occur when bar borders are thick

Related issue

Copy link
Collaborator

Could you also add a test for this?

minjibak reacted with laugh emoji

... - Added tests in element.bar.tests.js to verify pixel snapping fix
Copy link
Author

Hi, I added tests for the pixel snapping fix in element.bar.tests.js.

Verifies that bars with a thick borderWidth do not produce white gaps.

Verifies that borderRadius is handled correctly without creating gaps.

The original change in element.bar.js remains the same; these tests just ensure the fix is covered automatically.

Copy link
Author

Fixed an issue in the tests where bar.borderWidth was undefined in some environments.

Updated the tests to use bar.options.borderWidth instead, ensuring they pass consistently across platforms.

This change only affects the test code; the original pixel snapping fix in element.bar.js remains unchanged.

@LeeLenaleee LeeLenaleee removed this from the Version 4.5.1 milestone Oct 13, 2025
Apply pixel snapping only when snap option is enabled
Copy link
Author

@LeeLenaleee Hi, just an update regarding the previous commits:

The original fix remains unchanged, but I added a snap option to elements.bar. This allows pixel snapping to be applied only when explicitly enabled, which prevents test failures caused by automatic pixel snapping in certain environments.

No visual changes occur unless snap: true is set.

Copy link
Collaborator

For a test I meant something that will break if the implementation gets reversed and the lines become visible again.
Also since you added the prop to the element so people can set it themself you will need to update the docs and TS files accordingly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /