Horizontal Stacked Bar Labels Cut Off
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
Hello! I've been encountering some behavior with labelling on stacked horizontal bar charts that I feel is somewhat strange.
Basically, when I try to add a label to each section of the stacked bar, everything works fine until I adjust the range of the x-axis to get rid of the grey space to the right of the bars. It looks like if the sum of any of the bars goes even slightly over the range of the x-axis, it causes some labels to not show up. What confuses me, and makes me unsure if this is intended or not, is that it appears as if the labels are correctly appearing in the JSON, but don't actually show up on the graph.
Here's an example:
import pandas as pd
import plotly.graph_objects as go
summary_figure = go.Figure()
summary_figure.add_trace(go.Bar(
name="Women",
text=["Women"]*4,
y = ["A","B","C","D"],
x = [50,60,70,85],
orientation = 'h',
textfont_color="white",
textangle=0,
textposition="inside",
insidetextanchor= "start",
cliponaxis=False,
))
summary_figure.add_trace(go.Bar(
name="Men",
text=["Men"]*4,
y = ["A","B","C","D"],
x = [50.001,40.001,30,15],
orientation = 'h',
textfont_color="white",
textangle=0,
textposition="inside",
insidetextanchor= "start",
cliponaxis=False,
))
summary_figure.update_layout(
barmode='stack',)
summary_figure.update_xaxes(range=[0, 100])
summary_figure.show()
In this example, "Men" appears in the JSON four times, but only gets displayed twice.
Because of tiny rounding discrepancies in our data, this behavior has led to a lot of confusion for my team. If it's intended, I'd love if there was some sort of warning to make it known that the bar is being truncated.
Thanks!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No source file, test, or entry point is named. Start by reproducing the supplied horizontal stacked-bar example in plotly.js with the x-axis range set to [0, 100], then trace how labels are rendered when bar totals slightly exceed the range. Done requires deciding the intended behavior and documenting or testing the resulting handling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100