Plot's ranges fail to resize when updating a Graph's figure with animate=True

[ned2]

I have a callback that updates the figure of a Graph by slicing the data to take a much smaller subset. When the callback is triggered, the range of the updated plot does not automatically resize when the Graph has animate=True. If I omit the animate param the range resizes fine.

[chriddyp]

Ah yeah. animate=True's functionality isn't well supported. I should probably remove it from the docs until it's more robust.

There is an issue in the plotly.js repo to make this better: plotly/plotly.js#1849

[chriddyp]

For now, try either:

• Setting the range manually on each update (just to be the min and max of the points that are plotted)
• Set the range manually to be the min and max possible

Here's an example that shows how each of these works. The left is the former, the right is the latter

import dash
import dash_core_components as dcc
import dash_html_components as html

import numpy as np

app = dash.Dash()

value_range = [-5, 5]

app.layout = html.Div([
    html.Div([
        html.Div(dcc.Graph(animate=True, id='graph-1'), className="six columns"),
        html.Div(dcc.Graph(animate=True, id='graph-2'), className="six columns")
    ], className="row"),
    dcc.RangeSlider(
        id='slider',
        min=value_range[0],
        max=value_range[1],
        step=1,
        value=[-2, 2],
        marks={i: i for i in range(value_range[0], value_range[1]+1)}
    )
], className="container")

trace = {
    'mode': 'markers',
    'marker': {
        'size': 12,
        'opacity': 0.5,
        'line': {
            'width': 0.5,
            'color': 'white'
        }
    }
}

@app.callback(
    dash.dependencies.Output('graph-1', 'figure'),
    [dash.dependencies.Input('slider', 'value')])
def update_graph_1(value):
    x = np.random.rand(50) * (value[1] - value[0]) + value[0]
    y = np.random.rand(50) * (value[1] - value[0]) + value[0]
    return {
        'data': [dict({'x': x, 'y': y}, **trace)],
        'layout': {
            'xaxis': {'range': [np.min(x), np.max(x)]},
            'yaxis': {'range': [np.min(y), np.max(y)]}
        }
    }

@app.callback(
    dash.dependencies.Output('graph-2', 'figure'),
    [dash.dependencies.Input('slider', 'value')])
def update_graph_1(value):
    x = np.random.rand(50) * (value[1] - value[0]) + value[0]
    y = np.random.rand(50) * (value[1] - value[0]) + value[0]
    return {
        'data': [dict({'x': x, 'y': y}, **trace)],
        'layout': {
            'xaxis': {'range': value_range},
            'yaxis': {'range': value_range}
        }
    }

app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

if __name__ == '__main__':
    app.run_server(debug=True)

[fdroessler]

I have a related error when using go.Histogram in a 2-subplot figure. Here in the first split second the histogram is drawn but then disappears. Only when I double click on the graph it reappears. However setting the range manually does not fix this and it's sometimes hard to get the max value for the manual rescaling. Any solution to this?

[chriddyp]

I'm going to close this in favor of plotly/plotly.js#1849