Horizontal dashed gridlines

plotly.js
1

my goal is to create the following graph:
Screen Shot 2021-12-16 at 10.50.34

I’m trying to create dashed grid lines using shapes - i’m talking about the gray lines not the red ones. drawing dashed vertical lines is easy enough as i have the values of the xaxis but the yaxis range is being generated automatically by plotly so i don’t have the values therefor i have no idea how i can draw horizontal dashed lines at Y tick position. The data i will plot will be dynamic so there’s no fixed range that i can set.

here’s my code for vertical lines:

  shapes:[1, 2, 3, 4].map(val => ({
        type: 'line',
        layer: 'below',
        xref: 'x',
        yref: 'paper',
        y0: 0,
        x0: val,
        x1: val,
        y1: 1,
        line: {
          width: 1,
          dash: 'dot',
          color: '#DCE0EA'
        }
      }))
2

any solutions?