tick labels missing after interacting with plot from angular-plotly

[archmoj]

@archmoj I've had a bit of a play around with a core plotly codepen (https://codepen.io/dmbarry86/pen/BaLKBmR) and a react plotly codepen (https://codepen.io/dmbarry86/pen/VwKaZqa) but am unable to replicate in either sorry. My react codepen does autoresize with window resizing though. I think you were missing style (never have quite understood why this is required TBH).

The only place where I can replicate the issue is the angular-plotly example (https://stackblitz.com/edit/angular-ivy-r3w5lj) shared by @zyzhu. I see in some earlier comments it was mentioned this started in 1.54.5 but when I change versions in that stackblitz it actually seems to be 1.54.6 where the issue starts happening. Not sure if that helps with the debug.

Note that this seems to be a completely different issue to the one originally raised in this ticket which is fixed in 1.58.0 as far as I can tell.

Originally posted by @dmbarry86 in #4459 (comment)

[bishonen]

I tried recreating this issue with a clean create-react-app, but am unable to do it with a simple example of a plain bar chart (plotly.js 1.57.1). The same version of plotly.js, do give me the same disappearing labels during resizes of the element in which the is rendered in a real app (with dozens of dependencies, data coming from api's etc. making it hard to recreate on codepen).

I can confirm however that the issue appears exactly in 1.54.6 When downgrading my real app to 1.54.5, the labels do not disappear anymore.
Can it be, that it's related somehow to this pr(#4977)?

Pics for reference again:

[archmoj]

It could be.
@bishonen could you try this bundle
https://95855-45646037-gh.circle-artifacts.com/0/dist/plotly.js ?

which is of this dev branch: https://github.com/plotly/plotly.js/compare/debug-5318

[archmoj]

@bishonen please also test this bundle too:
https://95864-45646037-gh.circle-artifacts.com/0/dist/plotly.js
Thanks!

[bishonen]

@bishonen please also test this bundle too:

https://95864-45646037-gh.circle-artifacts.com/0/dist/plotly.js

Thanks!

Sorry about a dumb question but how can I test this out in a react app? Can I replace poorly.js in the node modules just like that?

[wbrgss]

@bishonen I think we managed to fix this in #5345; you may try https://97143-45646037-gh.circle-artifacts.com/0/dist/plotly.min.js if you'd like to test before the next Plotly.js release.

Sorry about a dumb question but how can I test this out in a react app? Can I replace plotly.js in the node modules just like that?

I was able to use a different build of plotly using the Plotly Via Window Module instructions in the angular-plotly.js repo. If you drop a build (e.g. the one I linked above) in your project you should be able to link to it within your angular.json using PlotlyViaWindowModule instead of PlotlyViaCDNModule. This worked for me locally.

Unfortunately, as I mention in the description of #5345, I wasn't able to do this in Stackblitz for some reason, with a custom build of plotly.js that I uploaded 😕

[zyzhu]

I confirm the problem is gone after upgrading to 1.58.3. Thanks for fixing this promptly.