'Dash scatter plot- layout

I was trying to have some plot as shown in figure2, but I could not get the correct alignment. How can i do it?

 def blank_figure(self):
        fig = go.Figure(go.Scatter(x=[], y=[]))
        fig.update_layout(template=None)
        fig.update_xaxes(showgrid=False, showticklabels=False, zeroline=False)
        fig.update_yaxes(
            showgrid=False,
            scaleanchor="x",
            showticklabels=False,
            zeroline=False,
        )

        return fig


plot = [
            html.Div(
                [
                    html.Div(
                        children=[
                            dbc.Col(
                                dcc.Dropdown(
                                    id="data-selector",
                                    options=options_data_selector,
                                    value=value,
                                    clearable=False,
                                    multi=False,
                                    className="dropdown-toggle",
                                ),
                                width=3,
                            ),
                        ],
                        # className="dropdown",
                    ),
                    dbc.Card(
                        [
                            dbc.Row(
                                [
                                    dbc.Col(
                                        [
                                            dcc.Dropdown(
                                                id="selector-y",
                                                options=options,
                                                value="TotalStudyCost",
                                                clearable=False,
                                                multi=False,
                                                # optionHeight=40,
                                                # className="dropdown-toggle",
                                            ),
                                        ],
                                        # width=1,
                                        # style={"margin-top": "40px"},
                                        # style={"height": "100%"},
                                        className="y-container",
                                    ),
                                    dbc.Col(
                                        [
                                            dcc.Graph(
                                                figure=blank_figure(),
                                                id="plot",
                                                config={
                                                    "displaylogo": False,
                                                    # "displayModeBar": False,
                                                },
                                                # style={"height": "35vh"},
                                            ),
                                        ],
                                        width=10,
                                        className="plot-container",
                                    ),
                                ],
                                className="plot-wrapper",
                            ),
                            dbc.Row(
                                [
                                    dcc.Dropdown(
                                        id="selector-x",
                                        options=options,
                                        value="AverageStudyDuration",
                                        clearable=False,
                                        multi=False,
                                        className="selector-x-style"
                                        # className="dropdown-toggle Power",
                                        # optionHeight=40,
                                    ),
                                    #     ]
                                    # ),
                                    # width="50%",
                                    # ),
                                ],
                                className="selector-x-container"
                                # justify="between",
                            ),
                        ],
                        # className="card card-border-gray-light rounded-0",
                    ),
                ]
                #####
            ),
        ]

figure1: which I getenter image description here

figure which I want: figure2 enter image description here

problem in alignment of the dropdown with x and y axis, color of the dropdown, x and y axis are not coming of same size( as in x axis is comparatively smaller in size than y axis)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source