X Axis labels disappear starting in version 1.54.6

[madpoptart]

First off I would like to apologize for not having example code to share. I just wanted to make a note so the information and testing I have done is not lost.
We started using plotly.js with an Angular 9 project recently and discovered that when zooming in/out, auto scaling, and resetting axes the X labels would disappear. The project uses angular-plotly.js": "2.0.0" to create components out of the graphs.
We started with the latest version of plotly: "plotly.js": "1.54.7" and saw the issue appear. I then moved the version to 1.53.0 and the problem disappeared. I then slowly moved up the versions until it reappeared at version 1.54.6.
Version 1.54.5 seems to work correctly so there is something between 1.54.5 and 1.54.6 that is causing the issue.
I attempted to download plots as a png but the x axis appears to be intact rendering them useless for the purpose of demonstration.

[alexcjohnson]

Thanks @madpoptart

Is the x axis categorical? Instead of download, can you screenshot your app (or at least the plot)? The only relevant PR I see in v1.54.6 is #4977 but we'll need more info on exactly what kind of plots this happens on before we can find the right fix.

[madpoptart]

I'm not sure why I didn't think to at least add the relevant code to the ticket. This is a snippet from an Angular 9 application.

 lineChartLayout = {
    showlegend: true,
    autosize: true,
    height: 280,
    margin: {
      l: 30,
      r: 30,
      b: 80,
      t: 20,
      pad: 1
    },
    xaxis: {
      nticks: 24
    },
    legend: {
      x: 0.5,
      y: 1.4
    }
  }

  lineChartData = {
    data: [
      { x: [], y: [], type: 'scatter', mode: 'lines+points', marker: { color: this.actualDataChartColor }, name: 'Actual' },
      { x: [], y: [], type: 'scatter', mode: 'lines+points', marker: { color: this.predictOptimizeChartColor }, name: 'Predicted' },
    ],
    layout: this.lineChartLayout
  }

  lineChartData.data[1].y = data
  this.lineChartData.data[0].x = this.labels
  this.lineChartData.data[1].x = this.labels

In the view we add the plot as follows

 <plotly-plot *ngIf="graph.data.length" [data]="graph.data" [layout]="graph.layout"
                    [style]="{position: 'relative', width: '100%', height: '100%'}" [useResizeHandler]="true"
                    (plotly_click)="dataPointClicked($event)">
</plotly-plot>

Here is the graph from version 1.54.7 after the image has been auto scaled. Note: the image appears fine on first drawing it isn't until after zooming that the labels disappear.

Here is a plot generated using version 1.54.5 nothing has changed in the project except the version of plotly

Please note that the two plots represent two different days. I randomly picked the graphs after each run and they are not meant to look the same.

Let me know if there is anything else that could make it easier to look into this.

[archmoj]

Let me know if there is anything else that could make it easier to look into this.

Thanks for the report.
Could you please fork & modify this codepen with the layout & minimal data to see if we could replicate it there?

[madpoptart]

Hi @archmoj I forked the codepen you shared
https://codepen.io/Madpoptart/pen/wvGBjmY
I cannot reproduce the problem. I think the bug may be with angular-plotly.js": "2.0.0". I'm going to close this for now since the problem cannot be reproduced in a controlled environment.