plotly / plotly/plotly.js

Horizontal Stacked Bar Labels Cut Off

Open
#6,651 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
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()

image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.