I have produced a Boxplot graph in my Jupyter Notebook I am really happy with, however when I attempt to transfer it to aPlotly Dash dashboard I have been working on I lose the layout which I desire from the boxplot (no legend title, x axis formatting changes), and the boxplot contains large gaps which I suspect are due to the x axis labelling alterations.
Data:
box_plot_df = pd.DataFrame(data=box_plot_results).transpose()
box_plot_df.columns=KNN_list
Desired result achieved in original notebook:
box_plot_fig = go.Figure()
box_plot_fig.add_trace(go.Box(y=box_plot_df[1], name="1", boxmean=True))
box_plot_fig.add_trace(go.Box(y=box_plot_df[3], name="3", boxmean=True))
box_plot_fig.add_trace(go.Box(y=box_plot_df[5], name="5", boxmean=True))
box_plot_fig.add_trace(go.Box(y=box_plot_df[7], name="7", boxmean=True))
box_plot_fig.add_trace(go.Box(y=box_plot_df[9], name="9", boxmean=True))
box_plot_fig.add_trace(go.Box(y=box_plot_df[15], name="15", boxmean=True))
box_plot_fig.add_trace(go.Box(y=box_plot_df[18], name="18", boxmean=True))
box_plot_fig.add_trace(go.Box(y=box_plot_df[21], name="21", boxmean=True))
box_plot_fig.update_layout(title=dict(text='<b>KNN CV</b>',
font = dict(color="black")
),
title_x=0.5,
font_color="black",
xaxis_title="<b>n_neighbors</b>",
yaxis_title="<b>cross-validation score</b>",
legend_title_text='n_neighbors',
)
After researching online I messed around with two types of code within my dashboard, both producing the same result:
Dashboard Code and output:
html.Div(
children=[
dcc.Graph(
id='Box_Plot_ID',
figure=box_plot_fig
),
]
)
html.Div(className="graphs",
children=[
dcc.Graph(
id='Box_Plot_ID2',
figure={
'data': [
go.Box(y=box_plot_df[1], name="1", boxmean=True),
go.Box(y=box_plot_df[3], name="3", boxmean=True),
go.Box(y=box_plot_df[5], name="5", boxmean=True),
go.Box(y=box_plot_df[7], name="7", boxmean=True),
go.Box(y=box_plot_df[9], name="9", boxmean=True),
go.Box(y=box_plot_df[15], name="15", boxmean=True),
go.Box(y=box_plot_df[18], name="18", boxmean=True),
go.Box(y=box_plot_df[21], name="21", boxmean=True),
],
'layout': go.Layout(
title='<b>KNN CV</b>',
xaxis={'title': '<b>n_neighbors</b>'},
yaxis={'title': '<b>Cross-validation score</b>'},
font=dict(color="Black"),
legend_title_text='n_neighbors',
)
}
),
]
)
As you can see there is a gap in the middle which I suspect is due to the x axis values changing. Additionally the legend axis title is missing, which I attempted to resolve by adjusting margins (did not work).
Any support on how to resolve these issues would be greatly appreciated!
Many thanks 
1 post - 1 participant
