How to create a horizontal threshold line in plotly js?

Question

I am creating a simple line graph using plotly JS. The code is something like below:

var trace1 = {
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    type: 'scatter' 
};

var layout = {
    xaxis:{
    title:"X-Axis",
    tickangle:45,
    rangemode:'nonnegative',
    autorange:true,
    exponentformat: "none"
    },
    yaxis:{
    title: "Time",
    tickangle:45,
    rangemode:'nonnegative',
    autorange:false
    }
}
Plotly.newPlot(myDiv,[trace1],layout);

Now I want to create a horizontal line across the graph, parallel to x-axis which I want to span the entire graph. For this I added 'shapes' in layout something like below:

var layout = {
    xaxis:{
    title:"X_Axis",
    tickangle:45,
    rangemode:'nonnegative',
    autorange:true,
    exponentformat: "none"
    },
    yaxis:{
    title: "Time",
    tickangle:45,
    rangemode:'nonnegative',
    autorange:false
    },
    shapes: [
    {
        type: 'line',
        x0: 2,
        y0: 12.0,
        x1: 3,
        y1: 12.0,
        line:{
            color: 'rgb(255, 0, 0)',
            width: 4,
            dash:'dot'
        }
    }
    ]
};

Adding the 'shapes' parameter creates a horizontal value only between point 2 and 3 on the x-axes which I have specified .

My question is how to get the horizontal line span the entire graph without depending on x-axis value? Any help will be appreciated.

Answer 1

You could set xref to paper which tells Plotly not to rely on the x-axis coordinates but relative to the whole graph, i.e. 0 to 1.

var trace1 = {
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    type: 'scatter' 
};

var layout = {
    shapes: [
    {
        type: 'line',
        xref: 'paper',
        x0: 0,
        y0: 12.0,
        x1: 1,
        y1: 12.0,
        line:{
            color: 'rgb(255, 0, 0)',
            width: 4,
            dash:'dot'
        }
    }
    ]
}
Plotly.newPlot(myDiv,[trace1],layout);

<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>