'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",
),
]
#####
),
]
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 |
|---|


