Plotly Dash: How to display three graphs next to each other inside a tab

Question

I want to display three graphs next to each other, each taking up a third of the screen. Right now two are together and the other one is below them. They are all in the first tab.

first = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(
                    html.Div(
                        children=[
                            dcc.Graph(
                                figure=sentiment_bar,
                                style={
                                    "display": "inline-block",
                                },
                                
                            ),
                            dcc.Graph(
                                figure=sentiment_bar,
                                style={
                                    "display": "inline-block",
                                },
                                
                            ),
                            dcc.Graph(
                                figure=sentiment_bar,
                                style={
                                    "display": "inline-block",
                                },
                                
                            ),
                        ],
                    ),
                ),
                dcc.Tab(
                    label=" PrivacyConcerns ",
                    children=[dcc.Graph(figure=fig2)],
                ),
            ]
        )
    ]
)

Asked By: Domi

||

Source

Answer 1

You need to add 'width': '33%' to the style dictionary, see the example below.

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go

app = dash.Dash(__name__)

app.layout = html.Div([

    dcc.Tabs([

        # First tab
        dcc.Tab(label='Tab 1', children=[

            # First graph
            dcc.Graph(
                figure=go.Figure(go.Bar(x=[1, 2, 3, 4], y=[10, 20, 30, 40])),
                style={
                    'display': 'inline-block',
                    'vertical-align': 'top',
                    'width': '33%',
                },
            ),

            # Second graph
            dcc.Graph(
                figure=go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[10, 20, 30, 40])),
                style={
                    'display': 'inline-block',
                    'vertical-align': 'top',
                    'width': '33%',
                },
            ),

            # Third graph
            dcc.Graph(
                figure=go.Figure(go.Pie(values=[1, 2, 3, 4], labels=['a', 'b', 'c', 'd'])),
                style={
                    'display': 'inline-block',
                    'vertical-align': 'top',
                    'width': '33%',
                },
            ),
                
        ]),

        # Second tab
        dcc.Tab(label='Tab 2'),

        # Third tab
        dcc.Tab(label='Tab 3'),
    
    ])

])

if __name__ == '__main__':
    app.run_server(host='127.0.0.1', debug=True)

Answered By: Flavia Giammarino

Plotly Dash: How to display three graphs next to each other inside a tab

Question:

Answers: