CLOUDP-363674: Ensure small values show minimum bar visibility in Bar charts #3428
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add optional barMinHeight prop to Bar component (defaults to 0) - Ensures small values can be visible in charts with large value differences - Add Storybook story demonstrating the feature with extreme value data - Addresses issue where small/zero values are invisible next to large values
- Default barMinHeight to 1 instead of 0 to ensure all bars are visible by default - Fixes the UI bug where small/zero values are invisible next to large values - Users can still set barMinHeight to 0 if they prefer mathematically accurate zero heights
pavithrachidambaram-afk
requested review from
stephl3 and
tsck
and removed request for
a team
🦋 Changeset detectedLatest commit: 080579c The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Size Change: +408 B (+0.02%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
tsck
reviewed
Dec 31, 2025
Collaborator
There was a problem hiding this comment.
This is a tricky one!
I can see the value in your approach. Primarily that it distinguishes between null and 0 values. That said, I think an argument could be made that this advantage is already solved by the data label in the tooltip.
Where I see this approach being problematic is that it can be a data lie. If your scale is 100 pixels = 100 units, a 1 pixel bar equals 1 unit. If the value is actually 0, you are misrepresenting the data - 0 and 1 will render the same bar.
Perhaps we should get some design feedback on this before moving forward with this. @sooachung would be curious if you have any opinions here?
Collaborator
Author
|
Good point about data accuracy. I agree that making 0 and small values render identically could be misleading. Perhaps a safer approach is to:
That way each use case can decide the right trade-off. |
Collaborator
Hi Terrance, Sharing some background on this ticket/PR:
We couldn't find Aylin and Ksenia's names in github, so we pinged them on slack too to provide their feedback when they're back from vacation. |
Collaborator
Hey Nima, If the design was approved by a design system designer, I'm happy to approve. Thanks for sharing this context! |
tsck
previously approved these changes
Jan 2, 2026
Collaborator
It's actually from a product designer. 😅 Aylin reached out to design system designers, will send an update soon. 
|
|
@tsck you raise a good point! @sooachung had a an idea to differentiate between 1 px and 0 values to by using a disabled color, which I really like. We could apply 30% transparency to 0 values, that way it is distinct from 1 px and users still have access to the tooltip. Let me know what you think |
Collaborator
Author
|
@tsck I added the changed for 30% opacity, and made some updates ChartToolTip component as well. Could you kindly give another review? Thanks |
tsck
reviewed
Jan 6, 2026
Collaborator
tsck
left a comment
tsck
left a comment
There was a problem hiding this comment.
Love the opacity redesign! Have one small question about the Bar api, but otherwise this looks good
Contributor
|
Coverage after merging cloudp-363674-minimum-bar-visibility into main will be
Coverage Report for Changed Files
|
|||||||||||||||||||||||||||||||||||||||||||
tsck
approved these changes
Jan 7, 2026
pavithrachidambaram-afk
deleted the
cloudp-363674-minimum-bar-visibility
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
Small values including zero should show at least a thin bar (1px line minimum) on charts for visibility, currently it's a complete no show.
For example, when one bar has a value in the hundreds of millions and the adjacent bar has a much smaller value (e.g., a few hundred), the smaller value does not render as a visible bar.
For bars with 0 values, we will render it with 30% opacity to differentiate it with other bars with the same height.
Before:
After:
🎟 Jira ticket: CLOUDP-363674
✅ Checklist
For bug fixes, new features & breaking changes
pnpm changesetand documented my changes