How to Adjust the size of graphs in Dash with Python?

Question

The objective is to maximise the pie chart view at each place card. As can be seen in the figure below, the pie chart is small and not properly fit the window of each place card.

OP1 shed some workaround, but I am unable to reproduce it correctly.

Appreciate if someone can shed some light on how to address this problem.

The code to reproduce the above figure is:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objs as go

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

labels = [['monkeys', 'elephants'],
          ['birds', 'dinosaurs'],
          ['unicorns', 'giraffes']]

values = [[50, 40],
          [100, 10],
          [100, 20]]
data = []
for label, value in zip(labels, values):
    data.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
                                                            values=value,
                                                            hoverinfo='label+value+percent', textinfo='value'
                                                            )]})
                          ], className='col-sm-4'))

labels_second = [['Human', 'Animal']]
values_second = [[40, 60]]
data_second = []
for label, value in zip(labels_second, values_second):
    data_second.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
                                                                   values=value,
                                                                   hoverinfo='label+value+percent', textinfo='value'
                                                                   )]})
                                 ], className='col-sm-4'))


def color_font():
    selected_color = 'yellow'
    style = {'textAlign': 'center', 'background': selected_color}
    return style


def second_row():
    return html.Div(className='four columns div-user-controls',
                    children=[
                        html.H2('Second Row', style=color_font()),
                        html.P('Display data Left')])


def multiple_rows():
    return html.Div(className='rowxxx',
                    children=[
                        second_row(),
                        second_row(),

                        # my_tab(),
                        # html.Div(id='tabs-example-content')
                    ])


def pie_chart_side_by_side():
    return html.Div(data, className='row')


def pie_chart_single():
    return html.Div(data_second, className='row')


def multiple_columns():
    """
    Testing multiple column
    """
    return dbc.Row(
        [
            dbc.Col(multiple_rows(), width=1),
            dbc.Col(pie_chart_single()),
            dbc.Col(pie_chart_side_by_side()),
        ], no_gutters=True,  # Disable spacing between column
    )


app.layout = html.Div(
    children=[
        multiple_columns(),
    ]

)


# Callback for
@app.callback(Output('tabs-example-content', 'children'),
              [Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ])
    elif tab == 'tab-3':
        return html.Div([
            html.H3('Tab content 3')
        ])


# Run the app
if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

The parameter style is responsible to adjust the plot size.

For example,

style={"height": "50%", "width": "40%"}

The style can be incorporated as below,

html.Div(html.Div([dcc.Graph(figure = {'data': [go.Pie(labels=['Human', 'Animal', 'Alien'],
                              values=[40, 59.1, 0.9],
                              title='Trend',
                              showlegend=False,
                              hoverinfo='label+value+percent', textinfo='value')]}
                                        )
                              ], style={"height": "60%", "width": "80%"}))

Which produce something like the attachement below;