(some PDF viewers) Orca using plotly.js > 1.49.5 creates thin lines for bars with 0 length

[michaelbabyn]

0-length bars are visible in pdfs generated by Orca even though they aren't visible in the plotly.js graphs.

I can reproduce this issue using orca directly using this method with the below json figure.

{"data": [{"y": ["This", "is", "a", "test", "placeholder"], "x": [12, 9, 15, 12, 0], "type": "bar", "orientation": "h"}], "layout": {"xaxis": {"type": "categorical", "showgrid": false, "zeroline": false}, "yaxis": {"title": "test", "zeroline": false}}}

[michaelbabyn]

Note that the issue doesn't appear when I look at the pdf using Ubuntu's built in document viewer but it does appear when I open the PDF in chrome.

fig.pdf

[cldougl]

cc @plotly/product

[nicolaskruchten]

@antoinerg can you take a look plz?

[archmoj]

The v1.49.5 changelog is here: https://github.com/plotly/plotly.js/releases/tag/v1.49.5 What is the last plotly.js version that this works fine? Is that v1.49.4?

[michaelbabyn]

@archmoj 1.49.5 works and 1.50.0 is the first version that fails

[archmoj]

Is this only problematic when the zero bars are on sides of the graph, not in the middle?

[michaelbabyn]

When the zero bars are in the middle on 1.50.0, the line appears before saving the chart to a PDF https://codepen.io/michaelbabyn/pen/xxVRbjY

[michaelbabyn]

Note that I can reproduce the issue by printing the page to PDF using chrome if that makes debugging easier

[archmoj]

Here is v1.50.0 changelog: https://github.com/plotly/plotly.js/releases/tag/v1.50.0 Might be related to these PRs: https://github.com/plotly/plotly.js/pull/4180 and https://github.com/plotly/plotly.js/pull/4186

[antoinerg]

Thanks @michaelbabyn for the clear description of the issue and the Codepen to reproduce the issue! Thanks @archmoj for the references!

The reason why plotly.js puts a bar with a width of 0 is to properly support transitions. We can't transition a bar from being non-existent to having a finite value. Anyway, that's the conclusion I reached when introducing https://github.com/plotly/plotly.js/pull/4180.

It looks like a Chromium bug to me that rectangles with zero width would appear in its PDF output. Anyway, I think we could and should fix this in plotly.js since it will affect any Chromium user printing web pages and not just Orca users.

[antoinerg]

I tried to extract the ghost SVG element from a plotly.js figure and put it into a Codepen in order to reproduce the issue: https://codepen.io/antoinerg/full/MWyvQWx . I was hoping to see a thin line when printing to PDF but alas, the rendering there is OK. I'm not sure what makes Chromium to render thin lines when printing plotly.js figure to PDF :confused:

[antoinerg]

Closed by https://github.com/plotly/plotly.js/issues/5282