Dash - printing with subplots

Dash Python
1

Hi all,

I wanted to see if anyone has encountered this, I think the know the “hard” fix, but was curious if there was an easy one.

I’ve got a dash app, which has a series of subplots as one of the divs. The catch here is that the length of the subplots is dynamic (based on # of customers in the view triggered by the callback). Might be 9, might be 15. The subplot layout is 2 x n (where n is length of customers/2).

I’ve also got a requirement of being able to print this report, which I’ve been using CSS styling to apply page-break-before to different charts. The catch here being the subplots are all inside one chart figure (usually i can loop and dynamically add that CSS to other figures).

Is there an easy-ish way to add subplots with a page break after the nth row? Or would the solution be to simply add x different subplot objects which each have a page-break-after on them?

2

I’m assuming by “one chart figure” you mean dcc.Graph? Subplots in these charts are laid out with SVG, not HTML, so within the chart they won’t respond to CSS the same way regular HTML elements will. The spacing between subplots is set by plotly.js as a specific number of pixels, and CSS won’t affect that.

So seems to me the obvious solution is what you’ve already said, breaking each subplot (or at least each row) into its own chart; then since you have an arbitrary number of them, you’d create them all as the children prop of some container div rather than as the figure of a dcc.Graph.

3

thanks alex for the quick response. this is what I figured what the case, but i did just want to check in with the experts!