Resize Indicators graph objects to fit into dbc container

Dash Python
1

I am pretty new to plotly and dash so this may come off a noob question.

I am trying to build a dashboard and the first row will have 5 number plates. I have decided to use a number+delta indicator for each plate.

I have implemented the layout using dbc (dash_bootstrap_components) for easy structuring.

The problem is the output of the indicator is too small.

I have done a lot of digging on the internet to solve the problem and going through the form to see similar problems but I keep on coming short.

The Code

# Reference external stylesheet
stylesheets = [dbc.themes.LUX, 'asset/main.css']

app = JupyterDash(__name__, external_stylesheets = stylesheets, 
                  meta_tags=[{'name': 'viewport',
                              'content': 'width=device-width, initial-scale=1.0'}])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.H1(children="Financial Performance and Investment Dashboard", className="dashboard-title"),)
    ]),
    dbc.Row([
        dbc.Col(
            html.Div([
                dcc.Graph(id='indicator-1', figure = curr_rev_fig, responsive=True)
            ], className='indicator-1')
        ),
        dbc.Col(
            html.Div([
                dcc.Graph(id='indicator-2', figure = curr_rev_fig, responsive=True)
            ], className='indicator-2')
        ),
        dbc.Col(
            html.Div([
                dcc.Graph(id='indicator-3', figure = curr_rev_fig, responsive=True)
            ], className='indicator-3')
        ),
        dbc.Col(
            html.Div([
                dcc.Graph(id='indicator-4', figure = curr_rev_fig, responsive=True)
            ], className='indicator-4')
        ),
        dbc.Col(
            html.Div([
                dcc.Graph(id='indicator-5', figure = curr_rev_fig, responsive=True)
            ], className='indicator-5')
        ),
    ]),
    
    dcc.Graph(id='rev_graph', figure = netprofit_fig)

])

My Figures

curr_rev_fig = go.Figure(go.Indicator(
    mode = "number+delta",
    value = curr_rev,
    number = {'prefix': "$"},
    delta = {'position': "bottom", 'reference': prev_rev, 'relative': True, 'valueformat':'.2%'},
    # domain = {'x': [0, 1], 'y': [0, 1]}
))

I have tried to target the graphs using the main.css file in the assets folder, I have tried to target the outputs of the plots using the inline style function and lastly using the fig.update_layout() method. None have been successful. Any help will be appreciated. Thank you

2

Hi there,

Maybe someone has a better alternative for you, but if you just want to increase the font size, then you can use:

go.Indicator(number = {'prefix': "$", "font": {"size": 60}},...)

You’ll probably run in some issues on rescaling because of the fixed plot height, so I would consider looking for an alternative Dash component that is not dcc.Graph. It is a bit overkill to use it in the context of a card like this and someone else might have an implementation you can reuse.

Hope that this helps!