Increase axis autorange when bars have outside text labels #7675

emilykl · 2025-12-16T17:41:06Z

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:

After:

hist_stacked mock (with cliponaxis: false removed) Before:

hist_stacked mock (with cliponaxis: false removed) After:

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.

…lipping

camdecoster

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

camdecoster · 2025-12-18T18:42:04Z