Repository navigation
fix: align inner tick labels inwards on reversed linear axes - #12379
Open
Fardin7798 wants to merge 1 commit into
Open
Fardin7798 wants to merge 1 commit into
Fardin7798 wants to merge 1 commit into
Conversation
Linear, logarithmic and time scales reverse their ticks array when `reverse` is set, but the category scale does not. The `inner` label alignment assumed the category behaviour, so on a reversed linear axis the first and last labels were aligned outwards. Pick the alignment from the tick pixels instead, and position the label backdrop from the resolved per-tick alignment so it follows the label. Closes chartjs#12378
Fardin7798
marked this pull request as ready for review
November 6, 2026 09:48
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.
Closes #12378
With
ticks.align: 'inner'andreverse: trueon a linear x axis, the first and last tick labels were drawn outside the axis instead of inwards.The inner alignment code flips left/right when
options.reverseis set. That is right for the category scale, which keeps its ticks in label order and only reverses the pixels. Linear, logarithmic and time scales instead reverse theticksarray itself inbuildTicks, so on those scales tick 0 is already the leftmost tick and the extra flip pushes both end labels outwards.Changes in
_computeLabelItems(src/core/core.scale.js):getPixelForTick(0)with the pixel of the last tick, instead of readingoptions.reverse. This works the same for category, linear, logarithmic and time scales.tickTextAlign) instead of re-derivinginnerfrom the tick index. The old code ignoredreversecompletely, so a reversed category axis drew the end backdrops on the wrong side of their labels. For non-reversed axes the result is identical to before.Tests: added
ticks.align innerspecs intest/specs/core.scale.tests.jsthat check the leftmost label isleftaligned with its backdrop starting at the label, the rightmost isrightaligned, and the middle ones arecenter, for a linear axis, a reversed linear axis and a reversed category axis.What I ran (local headless Chromium 131, Linux arm64):
karma --grep core.scalewithout the fix: the reversed linear and reversed category specs fail. With the fix: they pass, along with the existingcore.scalespecs and image fixtures (label-align-inner*,tick-backdrop-alignment-inner).Linear Scale should fit correctly,Chart.layouts ...). No new failures. Firefox not run locally; left to CI.eslint src/core/core.scale.js test/specs/core.scale.tests.js: no errors.