Render the approval-status chart as horizontal bars to stop label overlap - #163
Open
zuhdil wants to merge 1 commit into
Open
Render the approval-status chart as horizontal bars to stop label overlap#163zuhdil wants to merge 1 commit into
zuhdil wants to merge 1 commit into
Conversation
…rlap
The Approved Products chart packed seven long approval-status names
under a narrow vertical-bar chart, so the category labels collided no
amount of wrapping could fix. Switching to the existing horizontal-bar
mode (`layout="vertical"`) moves the names onto the y-axis, one per row,
where `BarChart` already wraps them and exposes the full text on hover.
The `maxTickChars={999}` override is dropped so the y-axis labels wrap at
the default width instead of forcing a single long line, and the two
axis labels are swapped to match the rotated axes.
navins94
approved these changes
Jul 1, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Problem
On the Pipeline explorer page (Approved Products > Approval status), the seven approval-status names were crammed under a narrow vertical-bar chart and overlapped each other — no amount of label wrapping fixes that little horizontal room.
Fix
Switch this chart to the existing horizontal-bar mode (
layout="vertical"). The status names move onto the y-axis, one per row, whereBarChartalready wraps them and shows the full text on hover. Dropped themaxTickChars={999}override so the labels wrap at the default width, and swapped the two axis labels to match the rotated axes.One file, 3 lines changed.
Note
The y-axis tick area is a hardcoded
width={75}inBarChart.jsx. Long names like "Emergency Use Authorisation" wrap to two lines and should fit the 80px left margin — if any clip in review, the follow-up is ayAxisWidthprop rather than bumping the hardcoded value for every chart.