Setting xanchor: 'right'
and xanchor: 'left'
for the left and right annotation respectively may help, but really our system of normalized coordinates can show its limitation pretty fast when trying to generate graphs for multiple width/height combinations. Our apologies.
To workaround this problem, I’d recommend setting up “breakpoints”:
window.addEventListener('resize', function() {
var w = window.innerWidth
if(w <= 500) {
Plotly.relayout(gd, 'annotations[0].x', /* some new x position that works better for small width */)
}
// ...
})