Plotly.js: x-axis label disappears in certain cases

[deecay]

Issue: x-axis label disappears in certain cases (layout.margin.bottom specified && vertical x-axis labels?).

demo

The issue goes away when changing the library version to 1.44.2 in the above demo.

[etpinard]

Hmm.

From your codepen link https://codepen.io/deecay/pen/zYxpOad, I see

switching https://cdn.plot.ly/plotly-1.44.3.min.js for https://cdn.plot.ly/plotly-1.51.3.min.js in https://codepen.io/etpinard/pen/RwNxMRz, I get:

---

Can you share a screenshot of what you get when using v1.51.3 ? Thank you!

[deecay]

Hi,

These are screenshots from my Chrome 79.0.3945.88（Official Build）on Windows 8.1.

1.44.3

1.44.2

1.51.3

[etpinard]

Ok, that's weird. Can other @plotly/plotly_js devs open https://codepen.io/etpinard/pen/RwNxMRz and share what they're seeing? Thanks!

[alexcjohnson]

I also see the labels disappear. Looks like something changed a little bit with positioning in 1.45.0 such that for some of us the labels are over half the plot size so they get removed. If I bump the height up to 300px they come back. @etpinard I guess your font is a little smaller than mine?

[deecay]

I have noticed that y-axis label and range differs between the two versions, too.

y-axis differs

I don't know if these two are related, but I'm posting it here because it is axis-related change which happened in 1.44.3.

1.44.2

1.44.3 and later

[Carnageous]

Hello! Did you manage to solve this issue?
I do have the same problem with plotly.js-basic-dist-min v1.54.7 and Angular-plotly.
First the plots render correctly, but the x axis labels disappear on resize events, even when I force plotly to use all the available height.

[wshart]

Bump.
I'm also having this issue, but on plotly.js-cartesian-dist v1.56.0 and React.
My crappy workaround is to have set the Plot component's key to change on every React component update.
As above, the plot renders correctly at first, then the x (and y) axis labels disappear on resize events. I'm using this for a heatmap.

[zyzhu]

Bump. Met the same problem with v1.57.0 on basic bar chart. Labels on x axis disappear on resize events.

Repro here https://stackblitz.com/edit/angular-ivy-r3w5lj

Filed an issue here https://github.com/plotly/angular-plotly.js/issues/136. But it's actually related to plotly.js directly.

Note that if I change plotly.js version to 1.54.0 and earlier, this problem disappears.

[nicolaskruchten]

@archmoj can you dig into this one a bit please?

[archmoj]

@archmoj can you dig into this one a bit please?

Sure. Look like a automargin bug to me. But let me investigate...

[archmoj]

Bug confirmed on Windows and iOS.

[bishonen]

Did 1.58.0 truly fix this issue? I still have disappearing y-axis labels on a resize of a bar chart (see below).
Using the link from one of the comments above, I updated plotly to 1.58.0 and the axis labels still disappear there, too :/
https://angular-ivy-vx2jrb.stackblitz.io

which looks like this on first render:

[archmoj]

Did 1.58.0 truly fix this issue? I still have disappearing y-axis labels on a resize of a bar chart (see below).
Using the link from one of the comments above, I updated plotly to 1.58.0 and the axis labels still disappear there, too :/
https://angular-ivy-vx2jrb.stackblitz.io

which looks like this on first render:

Could you please share a minimal codepen?

[bishonen]

Did 1.58.0 truly fix this issue? I still have disappearing y-axis labels on a resize of a bar chart (see below).
Using the link from one of the comments above, I updated plotly to 1.58.0 and the axis labels still disappear there, too :/
https://angular-ivy-vx2jrb.stackblitz.io

which looks like this on first render:

Could you please share a minimal codepen?

Doesn't the link in the above comment work (https://angular-ivy-vx2jrb.stackblitz.io/)? The issue seems to be 1:1 the same as in the example of the screenshot. When resizing the browser, the labels simply disappear, which is not the case in e.g. 1.44.4.

[archmoj]

Could you please share a minimal codepen?

Doesn't the link in the above comment work (https://angular-ivy-vx2jrb.stackblitz.io/)? The issue seems to be 1:1 the same as in the example of the screenshot. When resizing the browser, the labels simply disappear, which is not the case in e.g. 1.44.4.

Not clear to me. Please fork and modify this codepen then open a new issue.

[zyzhu]

I see the same problem. The repro https://stackblitz.com/edit/angular-ivy-r3w5lj uses 1.58.0. If you resize the window, the labels still disappear.

[archmoj]

I see the same problem. The repro https://stackblitz.com/edit/angular-ivy-r3w5lj uses 1.58.0. If you resize the window, the labels still disappear.

Ues 1.57.0 in the package-lock?
Again why not making a minimal codepen to help us debug?

[zyzhu]

Sorry for the confusion. The repro above uses CDN module in app.module.ts. I've removed 1.57.0 from package.json to avoid confusion

PlotlyViaCDNModule.setPlotlyVersion("1.58.0");
PlotlyViaCDNModule.setPlotlyBundle("basic");

[archmoj]

@zyzhu no problem.
Does this codepen work for you?

[zyzhu]

Yes. I just did the same on codepen. It works just fine. I don't know why it does not work under the same version via angular-plotly.

[zyzhu]

Another observation, this codepen repro https://codepen.io/zyzhu/pen/eYdJpKz uses 1.57.0 and with responsive config. Labels also do not disappear when I resize window. But the repro above using angular's CDN module loading 1.57.0 and 1.58.0 both show the problem.

[archmoj]

Another observation, this codepen repro https://codepen.io/zyzhu/pen/eYdJpKz uses 1.57.0 and with responsive config. Labels also do not disappear when I resize window. But the repro above using angular's CDN module loading 1.57.0 and 1.58.0 both show the problem.

Thanks for the investigation. So that is basically not related to this bug report. Right?

[zyzhu]

To be precise on the version that started this problem, the repro https://stackblitz.com/edit/angular-ivy-r3w5lj using CDN module loading version <= 1.54.4 has no problem. Labels start to disappear since 1.54.5 till 1.58.0.

[archmoj]

Here is the changelog for v1.54.5.
If you are sure that v1.54.5 caused the problem, it should be possible to investigate which PR.

[alexcjohnson]

A few more observations: in that stackblitz the "common" hover label (the black one on the x axis) is broken - just shows an empty box that looks like an arrow, rather than the category name (giraffes) it's supposed to have:

And in fact if you switch to "closest" hovermode, this label is missing from the main hover label (should say (giraffes, 20):

Also you don't need to resize the window, even double-clicking the graph (invoking a redraw by autoranging the axes) will makes the labels disappear. Digging into the graph structure a bit, $0._fullLayout.xaxis._categories is an empty array, even at first draw when the labels do appear.

This is a really puzzling circumstance. If we can't reproduce it in a codepen, I'd look for something funny going on in the angular-plotly.js wrapper, though I have no idea what that might be.

[bishonen]

A few more observations: in that stackblitz the "common" hover label (the black one on the x axis) is broken - just shows an empty box that looks like an arrow, rather than the category name (giraffes) it's supposed to have:

And in fact if you switch to "closest" hovermode, this label is missing from the main hover label (should say (giraffes, 20):

Also you don't need to resize the window, even double-clicking the graph (invoking a redraw by autoranging the axes) will makes the labels disappear. Digging into the graph structure a bit, $0._fullLayout.xaxis._categories is an empty array, even at first draw when the labels do appear.

This is a really puzzling circumstance. If we can't reproduce it in a codepen, I'd look for something funny going on in the angular-plotly.js wrapper, though I have no idea what that might be.

Alexc, this is EXACTLY what I'm seeing on my end with the bar charts posted above! I have exactly the same disappearing label when hovering (in my case, showing: '{value}, ' [1]). When double clicking, the y-axis labels disappear completely, along with the y-gridlines.

I am using react, though, not angular. So if there's an issue with the angular-plotly.js, I reckon the same applies to react-plotly.js

[alexcjohnson]

Yes, we've also now seen this in a react environment. We still need to figure out how to reproduce it with no framework (ie a codepen) in order to pin down what's causing it, so if anyone has any insights there please share!

[archmoj]

Here is a codepen using react which seems to be working fine.
@bishonen @zyzhu could you replicate the problem in a similar codepen?

[zyzhu]

I've tried 1.58.1 via plotly-angular. The problem is still there if you resize window or double click the chart.
https://stackblitz.com/edit/angular-ivy-r3w5lj

[archmoj]

I've tried 1.58.1 via plotly-angular. The problem is still there if you resize window or double click the chart.
https://stackblitz.com/edit/angular-ivy-r3w5lj

Thanks for testing with v1.58.1. I didn't expect v1.58.1 to fix it BTW.

[nicolaskruchten]

@archmoj in your pens, resizing the window doesn't resize the chart... can you try that to see if you can replicate?

[archmoj]

@archmoj in your pens, resizing the window doesn't resize the chart... can you try that to see if you can replicate?

@nicolaskruchten
Strangely
the simple codepen does resize; but
when using react config doesn't do anything?

[archmoj]

@dmbarry86 wondering if you could possibly replicate this issue in a codepen?
https://github.com/plotly/plotly.js/issues/4459#issuecomment-739009300

[dmbarry86]

@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.

[archmoj]

Thanks tracked the angular issue in #5318.
Closing the ticket as the original bug report is addressed.