Pan with large rangebreak on the edge causing zoom instead

plotly.js
1

When adding range break and trying to pan around that range break - it causing like sticky zoom until you drag enough to jump over that hidden range.

Example: (drag to the right to see the issue)

dragmode: “pan”,
xaxis: {
range: [“2015-10-24”, “2015-12-24”],
tickformat: “%Y-%m-%d”,
rangebreaks: [
{
bounds: [“2015-12-25”, “2016-01-11”]
}
],

using rangeslider dragging to pan works as expected and without this issue.

Is there way to configure chart to avoid such behavior?

2

Check this

3

Unfortunately when I add same rangebreak as in my example - issue is the same. Without rengebreak all works great.

4

Added the rangebreak and fixed an error when dragging

5

This second option changes the drag code of the rangeslider, it is more fluid

6

Thanks for different ways to overcome this behavior. Seems that there is some issue related to internal pan/drag implementation. When dragging rangeslider - it behaves correctly on rangebreaks edges. No zoom etc. Maybe there is a way to replace drag/pan on main chart with the one on rangeslider… would be great

8

Sorry I misunderstood the problem, I thought what you wanted was to remove the zoom effect when you drag and you are in the limits of the graph, I realized after the problem, I leave you here a solution and explanation of what happens, it was not easy and now I understand why they have not fixed it, although as you say with the rangeslider there is no such problem, they could well apply the logic of the rangeslider to fix this problem with the drag.

When the rangebreak is outside the visible range it is not applied, when you start to drag the graph and the rangebreak enters the visible area you can notice that there is still that gap and it does not contract until you release the mouse button, only the axis is updated when the entire rangebreak enters the area, the solution is to force the rangebreak to be applied while you are dragging and not until the drag is finished.

You have to detect when the rangebreak enters or leaves the visible area, you have to calculate the size of the range when the rangebreak enters or leaves the visible area since you have to add or subtract the gap, also the problem occurs on both sides and finally this solution only works with a gap in the rangebreak and of the range type.

And finally I would like to tell you that I found another error during the drag, and that is that the value of the range that is stored in xaxis.range does not match what is visible and because of this when the drag ends the graph moves and is out of date and this is because it calculates the range wrong due to the gaps, the more gaps you pass during the drag, the more out of date the graph is when the drag ends.

Another alternative would be to make the graph static and only allow them to use the rangeslider to drag, or change the drag mode to zoom so that they can only zoom in on the graph and dragging is still done with the rangeslider.