Labels on X axis disappear on bar chart during window resizing
zyzhu opened this issue · comments
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
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?
Thanks. Found a similar issue there and bumped my case. Close this issue here.
The only workaround I could come up with for this was like this:
- Remove the default resize handler
- 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);
}
}