Repository navigation
fix(charts): axis labels fit, wrap or turn instead of overlapping; the SVG export reads the same - #1753
Merged
Conversation
…e SVG export reads the same X labels were cut at ~10 characters and ran into each other. One planner (ChartAxisLabels.planX) now picks, for screen and SVG alike: one line, two lines, turned 45 degrees, and only as the last resort every nth label. The left axis no longer shows the data maximum among round ticks (749.99 over 600). The pie legend formats values like the tooltips and shows the full label on hover. The SVG gets formatted ticks (1.2M), axis names and a bottom margin that follows the labels.
…ows the 45-degree geometry
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
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.
X labels under bar and line charts were cut at about ten characters and ran into their neighbours ("Precision Wirel…Noise Cancelli…"); the left axis showed the data maximum among round ticks (749.99 over 600); the SVG export drew every nth label with no fitting at all, raw numbers and no axis names.
ChartAxisLabels.planX(pure, tested) picks the layout for screen and SVG alike: one line → two lines → turned 45° (cut at 140 px) → every nth label turned, only as the last resort.1,234), full label on hover.1.2M, tooltips as1,234,567, axis names, bottom margin that follows the labels.Tests: planner (each layout, cut, thinning, empty), SVG (formatting, axis names, turned and wrapped labels). The existing chart tests are unchanged.
Not checked by eye after the change: I saw the before state in the running app (overlapping labels on 8 products), but my screenshot session of the after state was lost, so the layout is covered by the tests only.