plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

Set `cliponaxis: false` by default for bar traces with `text` and `textposition: 'auto'` or `'outside'`

Open emilykl opened this issue 3 months ago • 3 comments

Description

Mitigation for https://github.com/plotly/plotly.js/issues/2001 / https://github.com/plotly/plotly.js/issues/2000

Normally the cliponaxis trace parameter is true by default, meaning that text outside the plotted area is clipped.

However, since text is not taken into account when dtermining the axis range, this means that bar text placed outside the bar is almost always clipped by default, which is ugly.

This PR modifies the behavior of the cliponaxis parameter such that it is set to false by default in the following scenario:

  • A bar trace has a value supplied for text, AND textposition is set to 'auto' or 'outside'

This results in text outside bars no longer being clipped at the default axis range.

Screenshots

Before

Screenshot 2025-09-15 at 12 31 04 PM

After

Screenshot 2025-09-16 at 1 49 58 PM

Caveats

  • ~Does not change behavior when textposition is set to 'auto' (the default). Auto textposition typically places text inside the bar, but may place it outside occasionally if there is not enough space inside. So there is a (relatively rare) edge case where text could still be clipped.~ Updated: Now applies to both 'auto' and 'outside'
  • Does not change clipping behavior for trace types other than 'bar'. We may want to extend this behavior to other trace types in the future if there is demand, but I figured a more targeted change makes more sense to start with.
  • For traces with negative bars (and an x-axis on the bottom of the plot), this change can cause the bar text to overlap the axis tick labels (see image below). This can be avoided by manually setting cliponaxis: true. (I wonder if perhaps we should keep the default cliponaxis: true when there are negative bars; however this risks getting into a really twisty maze of edge cases where we have to consider not only the bar values, but also the axis direction as well as which side of the plot the ticks are drawn on). Screenshot 2025-09-16 at 4 03 01 PM

emilykl avatar Sep 16 '25 17:09 emilykl

Does not change behavior when textposition is set to 'auto' (the default). Auto textposition typically places text inside the bar, but may place it outside occasionally if there is not enough space inside. So there is a (relatively rare) edge case where text could still be clipped.

What would be the downside of extending this to 'auto' as well? Feels like there's very little likelihood of other items besides bar text being affected (mostly just scatter markers, but using these together with bars is rare), and because that's the default even if it requires another condition (not enough space inside the bar) it feels like it'll hit as many people or more than textposition: 'outside'. So I'd allow it with 'auto' as well.

I wonder if perhaps we should keep the default cliponaxis: true when there are negative bars; however this risks getting into a really twisty maze of edge cases where we have to consider not only the bar values, but also the axis direction as well as which side of the plot the ticks are drawn on

Agreed, don't go down that route. You don't want to do anything inside supplyDefaults that requires looking at the contents of data arrays.

alexjohnson-kobold avatar Sep 16 '25 20:09 alexjohnson-kobold

What would be the downside of extending this to 'auto' as well?

@alexjohnson-kobold Good point! I'm happy with extending it to 'auto' as well if you're in favor.

emilykl avatar Sep 16 '25 22:09 emilykl

HI, @emilykl wondering if this PR is being reviewed and merged in soon?

KajalTomar avatar Dec 03 '25 21:12 KajalTomar