Callback for axis range

Dash Python
1

Hi! I would like to know if there is any callback that could give me the axis range (for example yaxis) when selecting that range in a graph with the cursor.
Thank you!

2

You need to access “relayoutData” from the figure in the callback. That will give you a dict with xaxis and yaxis ranges upon zooming in or out.

layout = html.Div(
    [
        dcc.Graph(id="graph", figure=px.scatter(x=[1, 2, 3], y=[1, 2, 3])),
        html.Div(id="layout_output"),
    ]
)
@callback(
    Output("layout_output", "children"), Input("graph", "relayoutData"),
)
def get_layout(relayout_data: dict):
    if relayout_data:
        return json.dumps(relayout_data)
    raise dash.exceptions.PreventUpdate
1 Like
3

Thank you very much! Could you please give me the source of that information?

4

This might be helpful:

1 Like
5

Thank you very much! I have another question: How could i see all Input and output callbacks for any dcc or html components included in dash?

6

I have a problem with that code:
I wrote a slightly variation, that works fine, except for a small problem, that is that I cant use reset axes or autoscale in my graph

@app.callback(
Output(‘date_picker_consumption’, “start_date”),
Output(‘date_picker_consumption’, “end_date”),
Input(“consumption_graph_plotly”, “relayoutData”),
)
def get_layout(relayout_data: dict):

if relayout_data:
    if 'xaxis.range[0]' in relayout_data and 'xaxis.range[1]' in relayout_data:

        return relayout_data['xaxis.range[0]'].split()[0], relayout_data['xaxis.range[1]'].split()[0]
raise dash.exceptions.PreventUpdate
8

Pretty much any property of html or dcc components can be used in a callback. You can inspect the object or read the docs to see what is available.