[BUG]: Mixed bar orientations hide one bar on initial render, but restyle renders correctly

Open
#5,618 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
javascript, playwright, python

Research direction

Run the provided Python and Playwright reproduction and compare the initial-render screenshot with the Plotly.restyle result. Trace the bar rendering path for mixed horizontal and vertical orientations; done means both renderings show all three red bars without clipping or differences caused by render timing.

Written by the indexing model from the issue text.

Description

bug P3 size: 3
Description

A figure with two go.Bar traces renders differently depending on when the second
trace is changed from horizontal to vertical.

If fig.data[1].orientation = "v" is set before the first render, one red vertical
bar is missing or clipped. If the same base figure is rendered first and the same
orientation value is applied later with Plotly.restyle, all three red bars are
visible.

Screenshots/Video
Image Image
Steps to reproduce
import io

import plotly
import plotly.graph_objects as go
import plotly.io as pio
from PIL import Image, ImageChops
from playwright.sync_api import sync_playwright

print(f"Plotly version: {plotly.__version__}")

fig = go.Figure(
    [
        go.Bar(name="a", orientation="h", x=[1, 3, 2], y=[0, 1, 2]),
        go.Bar(name="b", orientation="h", x=[3, 2, 1], y=[0, 1, 2]),
    ]
)
fig.update_layout(xaxis_title="value", yaxis_title="index", legend_title_text="variable")

# plot1.png: set orientation before the first render.
fig.data[1].orientation = "v"
assert fig.data[1].orientation == "v"
html1 = pio.to_html(fig, full_html=True, include_plotlyjs="cdn")

# plot2.png: render first, then apply the same value with Plotly.restyle.
fig.data[1].orientation = "h"
html2 = pio.to_html(fig, full_html=True, include_plotlyjs="cdn")
html2 = html2.replace(
    "</body>",
    """
<script>
window.addEventListener("DOMContentLoaded", () => {
    const plotEl = document.getElementsByClassName("plotly-graph-div")[0];
    setTimeout(() => {
        Plotly.restyle(plotEl, {"orientation": "v"}, [1]);
    }, 1000);
});
</script>
</body>""",
)

with sync_playwright() as playwright:
    browser = playwright.chromium.launch(
        headless=True,
        args=["--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu"],
    )
    page = browser.new_page(viewport={"width": 1200, "height": 800})

    page.set_content(html1)
    page.wait_for_timeout(1500)
    img1 = page.screenshot(path="plot1.png")

    page.set_content(html2)
    page.wait_for_timeout(2000)
    img2 = page.screenshot(path="plot2.png")

    browser.close()

diff = ImageChops.difference(
    Image.open(io.BytesIO(img1)).convert("RGB"),
    Image.open(io.BytesIO(img2)).convert("RGB"),
)
assert diff.getbbox() is not None, "Screenshots are unexpectedly identical."
print("Saved plot1.png and plot2.png")
```### Notes

_Add info here that doesn't fit in the other sections._
Dominant language
Python
Stars
18.8k
Forks
2.8k
Avg merge
16h 26m
Merged PRs (30d)
21

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.

More from plotly/plotly.py

All issues in plotly/plotly.py

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.