Difficulty with annotations on paper with dynamic sized chart

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 */)
  }
  
  // ...

})