8000 Increase axis autorange when bars have outside text labels by emilykl · Pull Request #7675 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content
  • Insights

    • Increase axis autorange when bars have outside text labels #7675

    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.

    Sign up for GitHub

    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

    Jump to bottom
    Merged
    emilykl merged 11 commits into from
    Dec 19, 2025
    Merged

    Increase axis autorange when bars have outside text labels #7675

    emilykl merged 11 commits into from
    Dec 19, 2025
    +202 −148

    Conversation

    @emilykl
    Copy link
    Contributor
    @emilykl emilykl commented Dec 16, 2025 •
    edited
    Loading

    Closes #2001

    Adds a step during bar calc to add extra padding to axis range if bar has outside text labels.

    Note: The first commit in this PR is just formatting changes. Use this diff to skip the first commit and see only the meaningful changes.

    Codepen here! https://codepen.io/emilykl-code/pen/JoXQqLL

    This is a stopgap fix for the fact that text labels are not taken into account during autorange calculations (see #2000).

    Unfortunately, as discussed in that issue, modifying autorange to account for text labels is a significant amount of work, so I've opted for a more limited fix to address the issue identified in #2001.

    Changes in this PR:

    • Add a function which computes an estimate for the amount of additional axis space (in pixels) required by bar text labels
      • This estimate is equal to the number of lines in the bar text (the maximum of the whole array), times the font size, plus the padding between text and bar
      • This many pixels are then added to the axis range on the relevant side of the bar plot
      • The extra padding is ONLY applied when all of the following are true: textposition is 'outside', orientation is vertical, and text or texttemplate is provided and non-falsy, and textangle is 0 or 'auto'
        • These exclusions are to avoid cases where the text is not parallel with the top of the bar, which are significantly harder to estimate due to needing to estimate the text width rather than the height
        • The goal is to improve the current situation by adding padding in the most common cases where needed, while avoiding adding too much padding to the extent possible (even if this means excluding some cases where padding is needed)
        • I am aware of one edge case where too much padding is added; this is when bars have different numbers of lines of text, but the most lines are not aligned with the longest bar. I'm willing to accept that tradeoff, but open to feedback.
    • Update image baselines which show visual differences caused by this change
    • Remove "cliponaxis": "false" from the hist_stacked image mock, to demonstrate the effect of the changes in this PR (see below)

    Screenshots

    Before:
    Screenshot 2025-12-17 at 11 30 09 AM

    After:
    Screenshot 2025-12-17 at 11 29 37 AM

    hist_stacked mock (with cliponaxis: false removed) Before:
    Screenshot 2025-12-17 at 3 11 04 PM

    hist_stacked mock (with cliponaxis: false removed) After:
    Screenshot 2025-12-17 at 3 11 56 PM

    Steps for testing

    Use the following mock:

    {
    "data": [
        {
            "type": "bar",
            "orientation": "v",
            "x": ["A", "B", "C"],
            "y": [100, 250, -95],
            "base": [100, 100, 100],
            "texttemplate": "%{y}<br>units",
            "textposition": "outside",
        },
    ],
    "layout": {
    }
}

    Verify that it looks like the "before" picture on master and the "after" picture on this branch.

    Other variations to test:

    • Setting layout.yaxis.autorange to "reversed"
    • Using the bar.text property instead of bar.texttemplate
    • Adding a second bar trace and setting layout.barmode to "stack"

    You can also load the hist_stacked mock in the devtools as another test case.

    @emilykl emilykl marked this pull request as ready for review December 17, 2025 16:28
    @emilykl emilykl requested a review from camdecoster December 17, 2025 16:28
    @emilykl emilykl changed the title DRAFT: Fix for cut-off bar labels Increase axis autorange when bars have outside text labels Dec 17, 2025
    @emilykl emilykl mentioned this pull request Dec 17, 2025
    Closed
    camdecoster
    camdecoster approved these changes Dec 18, 2025
    View reviewed changes
    Copy link
    Contributor
    @camdecoster camdecoster left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    I left some syntax and refactoring comments, but this looks good.

    @emilykl emilykl force-pushed the cutoff-bar-labels branch 2 times, most recently from 1ef511f to acf38e1 Compare December 19, 2025 20:20
    @emilykl @camdecoster
    Update src/traces/bar/cross_trace_calc.js
    e0ab211 
    Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>
    @emilykl emilykl merged commit e0c2df7 into master Dec 19, 2025
    6 of 7 checks passed
    @emilykl emilykl deleted the cutoff-bar-labels branch December 19, 2025 23:13
    @emilykl emilykl mentioned this pull request Dec 23, 2025
    Closed
    emilykl added a commit that referenced this pull request Dec 23, 2025
    @emilykl
    add draftlog for PR #7675
    23b0d0e
    emilykl added a commit that referenced this pull request Dec 23, 2025
    @emilykl
    Merge pull request #7677 from plotly/draftlog-7675
    e661a4c 
    Add draftlog for PR #7675
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Reviewers

    @camdecoster camdecoster camdecoster approved these changes

    Assignees

    @camdecoster camdecoster

    Labels

    None yet

    Projects

    None yet

    Milestone

    No milestone

    Development

    Successfully merging this pull request may close these issues.

    [BUG] Text is cut off on bars where textposition=outside

    3 participants

    @emilykl @camdecoster
    0