Impossible to display 2 graphs with 1/3 - 2/3 width (maximum call stack exceeded JS error)

Dash Python
1

In the application I currently develop, I encountered 2 days ago a “maximum call stack exceeded” javascript error that completely stop the page from running when modifying filters. After a tedious inspection of each and every callbacks and variables, I figured out this was due to the css code.

In a given row, I have a barplot and a boxplot sharing the total width of the page. When those are inline, the app freezes and the error systematically occurs. After a while, everything is correctly displayed but the first graph, for which I can only see a blank dcc.Graph.

The code is the following:

# GRAPH 1
html.Div(
    [
        dcc.Graph(
            id='stays-count-histogram',
        ),
    ]
    , style={'width':'30vw',
            'display':'inline-block'}
),
# GRAPH 2
html.Div(
    [
        dcc.Graph(
            id='stays-duration-boxplot'
        )
    ]
    , style={'width':'50vw',
            'float':'right'}
),

Additionally, I’ve set autosize=False in plotly layout parameters, and don’t have any margin inherited from any parent container nor class of any kind. Would someone have an idea of how I could sort this out and make those 2 components occupy the whole space available in that row ?

Ps>This app is my first experience with front-end development: the back-end starts to be kind of sophisticated but all the htlm and css code is (just as my competencies) pretty basic. Thank you for the library, that’s a very enjoyable introduction to web dev.

Ps2: Here’s the detailed error code displayed in the browser:

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)
RangeError: Maximum call stack size exceeded

at http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:315840

at ut (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:312111)

at Array.W.each (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:315814)

at e.exports (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:2022841)

at Object.r.drawMarginPushers (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:2267533)

at M (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:2241175)

at Object.l.syncOrAsync (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:2159371)

at r.plot (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:2243082)

at Object.r.call (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:2620181)

at v.doAutoMargin (http://127.0.0.1:8050/connected-cars-platform/_dash-component-suites/dash_core_components/plotly-1.49.1.min.js?v=1.1.1&m=1565676259:7:2526918)
1 Like