Difficulty with annotations on paper with dynamic sized chart

plotly.js
1

I have a chart (https://codepen.io/anon/pen/PLdaNJ) where I want to have an annotation either side of the range slider. The chart can vary it’s height based on the users screen size. Is there a way to lock the annotations into position? I have tried yanchor top/middle/bottom.

In this example if you change the chart height to 500 the annotations move out of position and look untidy.

2

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

})
3

Great! Thanks for the tip. Breakpoints would work. I think I will set the chart size at 3 set heights based on screen size.