I’ve created a plot and plotted also a line shape over the plot.
The line shape is a vertical one with a
-minY = minY in data to plot * 10
-max Y = maxY in data to plot * 10
But, I restricted the yaxis.range to the minY and maxY in data to plot.
This is basically to achieve this https://community.plotly.com/t/moving-shapes-with-mouse-in-plotly-js-reactjs/11457/7?u=fjrial
Now the part where it fails
If I make the same with a “rect” shape, instead of a line, the plotted chart shows fine, but if you do a double-click (reset zoom event) over it, the chart does not obey the yaxis.range… Maybe it’s a bug??? Does someone knows how to fix this??
Can you share a reproducible example to help us debug?
Sure, here it’s
First, it creates the chart with the yaxis.range configured, then creates the shape on it (the shape is taller than the data on the chart)
If you do a double click, the graph rescales to show the full height of the shape, omitting the yaxis.range values. If you inspect the chart object, the _fullLayout.shapes properties are fine, and also the yaxis.range is in place.
Here are two ways to get this to work:
Sorry to bother you with this, but in your examples, it happens the same, if you make a double-click over the charts, the plot somehow resets the yaxis.range to show the full shape. Try, in your examples, to do a double-click several times (twice should be enough) and you will see what I’m telling you.
Ah so you don’t like that one double-click autoranges the axis and two double-click reset them?
If so, set
doubleClick: 'reset' (the default being ‘reset+autosize’) in the config options as in https://codepen.io/etpinard/pen/ejRNjq?editors=1010
Yes, that’s it!!. Thank you so much for your answers.
Didn’t know about that option, excuse me, please, I’m migrating all my charts from Jqplot to Plotly, and maybe I didn’t look at the right place.