Diagonal line through origin [0,0], even on zoom

plotly.js
1

Hello!

I’ve created a diagonal line through the origin, but I’d like that line to stay through the origin when the user zooms in our out - is that possible? Maybe by leveraging the equation of a line?

Update: I tried using an update function in my codepen below but this ends up crashing the entire page!!

<head>
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
	<div id='myDiv'></div>
</body>

let trace = [
{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16],
mode: 'markers',
    type: 'scatter'
}
]

let layout = {
   shapes: [
     {
       type: 'line',
       yref: 'paper',
       xref: 'paper',
       y0: 0,
       y1: 1,
       x0: 0, 
       x1: 1,
       layer: 'below',
line: {
color: 'gray',
width: 1
}
}]
}

Plotly.newPlot('myDiv', 
               trace, 
               layout, 
               {scrollZoom: true});

also here: https://codepen.io/MayaRGans/pen/WNMzWBZ

2

Hi,

Have you tried to use xref: “x” and yref: “y” (axis coordinates), instead of paper coordinates?

3

Thanks for your reply @jlfsjunior! This does seem to lock the line to the [0,0] point, but I want the line to extend infinitely in the negative and positive directions when the user zooms out if that makes sense?

4

It does make sense, but I am afraid I don’t know if this is possible (having a “true line” instead of a segment)….

One workaround could be to give a large value for the second point and unset autoscale to limit the ranges to the traces instead of the line. Maybe somebody else has a better alternative though.