Double click/Reset view button to reset zoom doesn't restore the graph to its original axis range

Dash Python
1

Hi,

I have created an application using Dash hosted here: http://www.datadabble.in

If you look at the behavior of the passing network maps at bottom right, after I zoom into one of them and then double click to reset, the chart doesn’t restore to original size but to a slightly bigger version. I think this is happening because it is not heeding the axis range specified for the plot. Same thing happens with adjacent plot.

I tried hitting the home icon to reset view, but that didn’t help either.

Any idea why this is happening? Any solutions?

Thanks!

1 Like
2

I have the exact very same issue : I specified a range, the graphic is displayed correctly at loading, but if i Zoom in (double click) and then try to come back to the initial state, no way, it kind of switches to “auto” and it is not possible to get the initial range back.

3

Same issue here. I’m loading more data than initially shown on plot and am specifying with xaxis/range, but when double click to reset zoom goes to full data period instead of specified axis/range.

Is there a solution to either have the ‘reset axis’ respect manual range, or specify details of the double-click revert?

1 Like
4

I would also appreciate this feature. I have a 2-axis graph that i’d like to scale back the original size after someone zooms out. Is there a way to link double-click event to a different callback that redefines the axis ranges?

5

I have the same issue. The axis limits are initialized so they only show a part of the full data but then reset to the full range on double click or after clicking on the “Reset axes” button in the modebar. A solution to reset the axes to the original range instead of the full range would be great.

6

Are there any updates on this?
I have the same problem. I fixed the axis range to prevent autoscaling when selecting single traces in the scatter plot. But after zooming it is going back to autoscaling…

7

Has anyone found a way to solve this problem yet?

I have trouble with the same problem…
Predefined yaxis range, but when the user double clicks it autoscales all the way out

8

I think it’s happening because yaxis autorange is set to true.

1 Like
9

Anyone? Any fix???

10

There seems to be a fix involving custom javascript to change the behavior of the ‘reset view’ button:

I wonder if we could use this in combination with the modeBarButtonsToAdd config option to dcc.Graph (Graph | Dash for Python Documentation | Plotly):

modeBarButtonsToAdd (list; optional): Add mode bar button using config objects - modeBarButtons (boolean | number | string | dict | list; optional): Fully custom mode bar buttons as nested array, where the outer arrays represents button groups, and the inner arrays have buttons config objects or names of default buttons

11

If anyone can get the above javascript working with a Dash app and explain how to set it up (where to put javascript, how to edit javascript for a graph object, etc.) that would be amazing.

1 Like
12

Best way to fix this is to use the plotly double click event

In this event you can always reset your axis:{ range } to your predefined range, my implementation looks something like this.

setLayout((layout) => ({
    ...layout,
    xaxis: {
        ...layout.xaxis,
        range: [
            chartData[0].Datetime,
            chartData[chartData.length - 1].Datetime
        ],
    },
}));

Hope this helps

13

I’m not sure if this has been fixed or not, and the only solution in this thread is in javascript, so I figured ill post a solution in python.

When you double click a figure, fig.layout.yaxis.autorange gets set to True. Therefore, you need to set up a callback that updates the figure, and as part of the callback, update the axes using:
fig.update_yaxes(autorange=False, range = [x,y])
Where [x,y] is your original range.

14

Instead of using range if we directly limit autorange using ‘maxallowed’ and ‘minallowed’ keys, it works fine.

Something like:
fig.update_xaxes(autorangeoptions_maxallowed=upper_bound, autorangeoptions_minallowed=lower_bound)

15

The only working solution I found is here:

You have to create a function that creates a Div (with Graph/Figure) directly in the layout. This can then be updated later via callbacks.

Hopefully one day they’ll fix this bug…