Horizontal scrollbar in Dash app with make_subplots

Dash Python
1

Hi folks,
I have a Dash app where I create a figure with a flexible amount of subplots (in this example controlled by the input). Until a certain amount everything is fine, but once too many graphs are given the title, ticks etc. shrinks to much and is not readable anymore.

I though of implementing a horizontal scrollbar, and fixing the size of each subplot.
Unfortunately I couldn’t find a way of implementing it.

Or is there a better way? Maybe with ScrollArea from Mantine Components? Any ideas?

from dash import Dash, html, Input, Output, dcc, callback
import plotly.graph_objects as go
import random

from plotly.subplots import make_subplots

@callback(
    Output("scrollable-subplot", "children"),
    Input("amount-of-graphs", "value")
)
def plot_all(value):
    if value >=1:

        fig = make_subplots(
            rows=1,
            cols=value,
            horizontal_spacing=0.05,
            shared_yaxes=True,
        )

        row = 1
        column = 1

        for _ in list(range(0,value)):

            fig.add_trace(go.Scatter(
                x=[1,2,3,4,5,6,7],
                y=[random.randint(1,10) for _ in range(1,7)],
                mode="lines",
            ),
            row=row,
            col=column)

            column += 1

        graph = dcc.Graph(figure=fig)
        
        return graph

layout = html.Div(
    children=[
        dcc.Input(
            value=1,
            type="number",
            id="amount-of-graphs"
        ),

        html.Div(children=[
        ], id="scrollable-subplot"),

    ]),

app = Dash()
app.layout = layout

if __name__ == "__main__":
    app.run(debug=True)
2

This shows a horizontal scrollbar (as long as the width set in the code is more than the width of your screen).

import plotly.graph_objects as go
from plotly.subplots import make_subplots
from dash import dash, html, dcc

ncols = 6
fig = make_subplots(rows=1, cols=ncols)
for col in range(1, ncols+1):
    fig.add_trace(go.Scatter(x=[1,2,3,4], y=[0., 0.2,0.3,0.7]), row=1, col=col)

app = dash.Dash(__name__)
app.layout = html.Div(
    [dcc.Graph(figure=fig),],
    style={"width":"3000px"}
)
if __name__ == '__main__':
    app.run_server()