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)