Labels on X axis disappear on bar chart during window resizing

[zyzhu]

I followed the example here to create a basic bar chart
https://plotly.com/javascript/bar-charts/

When I drag browser window, the labels on x axis will disappear during chart resizing. See repro on stackblitz link below
https://stackblitz.com/edit/angular-ivy-r3w5lj

plotly.js version: 1.57.0
plotly.js bundle: basic
angular-plotly.js version: 3.0.0
angular version: 10.0.9

[andrefarzat]

hello @zyzhu, it looks like it's an issue with plotly.js itself, not related to angular-plotly.js.
To prove it I downgraded the plotly.js version to 1.49.0 and it worked as expected.
See here: https://stackblitz.com/edit/angular-ivy-2ivbfq?file=src%2Fapp%2Fapp.module.ts

Do you mind opening the issue in the https://github.com/plotly/plotly.js repo?

[zyzhu]

Thanks. Found a similar issue there and bumped my case. Close this issue here.

[nikhilkalyankar]

The only workaround I could come up with for this was like this:

1. Remove the default resize handler
2. Add this to the code

HTML

<div (window:resize)="onResize($event)"></div>
<plotly-plot [divId]="divId" [data]="data" [layout]="layout"
	[style]="{position: 'relative', width: '100%', height: '100%'}"></plotly-plot>

TS

  constructor(private plotlyService: PlotlyService) {}
  divId = "1";
  onResize(event: any): void {
    const graph = this.plotlyService.getInstanceByDivId(this.divId);
    if (graph) {
      this.plotlyService.resize(graph);
      this.plotlyService.getPlotly().relayout(graph, this.layout);
    }
  }