Adding a line in the y axis

[mrseo]

Hi all!
I’m doing a very simple graph in plotly js, but I can’t add a line in the y-axis to mark a zone, like the green line in the image that I manipulated to show the result.
I’m trying to define the line in the shape property but isn’t’ working.
My code is:

          Plotly.plot(gd, [{
            x: eixoX,
            y: eixoY,
            mode: 'lines+markers',
            type: 'scatter',
            name: 'ORS da Sessão',
            height:200,
            marker: {
              color: 'tomato',
              size: 16
            }
          }],
           {
            shapes: [
               {
                type: 'line',
                x0: 'Thu Jan 1 1970 00:00:00 GMT+0000 (WET)',
                y0: 20,
                x1: 'Wed Dec 31 3000 00:00:00 GMT+0000 (WET)',
                y1: 20,
                line: {
                  color: 'rgb(50, 171, 96)',
                  width: 4,
                  dash: 'dashdot'
                }
              }
              ]
            }, 
            {
              yaxis: {
                range: [0,40]
              }
          });



        window.onresize = function() {
            Plotly.Plots.resize(gd);
        };

[etienne]

Your dates in shapes[0].x0 and shapes[0].x1 aren’t formatted correctly.

Something like:

      shapes: [
               {
                type: 'line',
                x0: '1970-01-01',
                y0: 20,
                x1: '3000-12-31',
                y1: 20,
                line: {
                  color: 'rgb(50, 171, 96)',
                  width: 4,
                  dash: 'dashdot'
                }
              }
           ]

should do the trick.

[mrseo]

@etienne

‘3000-12-31’

Thank you, it did!
But is it possible to have a variable x, for example, x0 to be the first x in the array eixoX and the x1 the last value of the array?

[mrseo]

Hi etienne,

I’ve changed the data format, and now I need something like
shapes: [{
type: ‘line’,
x0: ‘01/01/2018’,
y0: 25,
x1: ‘31/12/2018’,
y1: 25,
line: {
color: ‘red’,
width: 2
}
}, {
type: ‘line’,
x0: ‘01/01/2018’,
y0: 36,
x1: ‘31/12/2018’,
y1: 36,
line: {
color: ‘blue’,
width: 2
}
}]

but the lines disappeared… How can I format now?

Thanks!