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

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:

    , style={'width':'30vw',
    , style={'width':'50vw',

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 ut (

at Array.W.each (

at e.exports (

at Object.r.drawMarginPushers (

at M (

at Object.l.syncOrAsync (

at r.plot (

at (

at v.doAutoMargin (
1 Like