Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

dcc.Graph attempts to resize umounted Graphs #534

Closed
@wbrgss

Description

@wbrgss

Results in a console error: Uncaught Error: DOM element provided is null or undefined

Demo of behaviour:

dom-element-provided

Dash app used to demo this bug
  • Using Chromium Version 73.0.3683.86 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
  • Using Dash 0.41.0
import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.Div([
        # without the fix in this PR, this graph will disappear after clicking
        # graphs back and forth ~8 times
        dcc.Graph(
            id='example-graph-ex',
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2],
                        'type': 'scattergl', 'name': 'SF'},
                    {'x': [1, 2, 3], 'y': [2, 4, 5],
                     'type': 'scattergl', 'name': u'Montréal'},
                ]
            }
        )
    ]),
    dcc.Tabs(id="tabs", children=[
        dcc.Tab(label='Tab one', children=[
            html.Div([
                dcc.Graph(
                    id='example-graph',
                    figure={
                        'data': [
                            {'x': [1, 2, 3], 'y': [4, 1, 2],
                                'type': 'scattergl', 'name': 'SF'},
                            {'x': [1, 2, 3], 'y': [2, 4, 5],
                             'type': 'scattergl', 'name': u'Montréal'},
                        ]
                    }
                )
            ])
        ]),
        dcc.Tab(label='Tab two', children=[
                dcc.Graph(
                    id='example-graph-1',
                    figure={
                        'data': [
                            {'x': [1, 2, 3], 'y': [1, 4, 1],
                                'type': 'scattergl', 'name': 'SF'},
                            {'x': [1, 2, 3], 'y': [1, 2, 3],
                             'type': 'scattergl', 'name': u'Montréal'},
                        ]
                    }
                )
        ]),
        dcc.Tab(label='Tab three', children=[
                dcc.Graph(
                    id='example-graph-2',
                    figure={
                        'data': [
                            {'x': [1, 2, 3], 'y': [2, 4, 3],
                                'type': 'scattergl', 'name': 'SF'},
                            {'x': [1, 2, 3], 'y': [5, 4, 3],
                             'type': 'scattergl', 'name': u'Montréal'},
                        ]
                    }
                )
        ]),
    ])
])


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

Simple fix: check if the element with the given id exists before calling Plotly.Plots.resize()

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions