What's the best way to remove some of the whitespace between my charts

Dash Python
1

image
image.png1264×1072 39.3 KB

I have my charts output like this but I can’t seem to be able get them to be a little closer together. I’ve tried messing with the top margin of the bottom most chart for example but all that does is ruin the inblock alingment of the middle two.

Here’s my code

app = dash.Dash()
data = pd.read_csv(filename)



app.layout = html.Div([dash_table.DataTable(id='raw_data',
                                            data=[],
                                            style_table={
                                                'height': '300px',
                                                'overflowY': 'scroll',
                                            },
                                            style_cell={'textAlign': 'center',
                                                        'font_size': '11px'},
                                            style_header={'fontWeight': 'bold',
                                                          'font_size': '14px',
                                                          'color': 'white',
                                                          'backgroundColor': 'black'

                                                          },
                                            style_data_conditional=[
                                                {
                                                'if': {'row_index': 'odd'},
                                                      'backgroundColor': 'rgb(248, 248, 248)'
                                                }
                                            ]
                                            ),
                       dcc.Interval(id='interval_component',
                                    interval=60000,
                                    n_intervals=0
                                    )
                       ,
                      html.Div([
                          dcc.Graph(id='delta_graph')
                      ], style={'width': '48%', 'display': 'inline-block'}),
                      html.Div([
                          dcc.Graph(id='daily_running_graph')
                      ], style={'width': '48%', 'display': 'inline-block'}),
                       html.Div([
                           dcc.Graph(id='model_v_pred')

                       ],)

                      ])



@app.callback(Output('raw_data', 'data'),
              [Input('interval_component', 'n_intervals')])
def update_rows(n_intervals):
    data = pd.read_csv(filename)
    data_sorted = data.sort_values('Timestamp', ascending=False)
    data_rounded = data_sorted.round(4)
    dict = data_rounded.to_dict('records')

    return dict



@app.callback(Output('raw_data', 'columns'),
              [Input('interval_component', 'n_intervals')])
def update_cols(n_intervals):
    data = pd.read_csv(filename)
    columns = [{'id': i, 'names': i} for i in data.columns]
    return columns

@app.callback(Output('delta_graph', 'figure'),
              [Input('interval_component', 'n_intervals')])
def update_period_graph(n_intervals):
    df = pd.read_csv(filename)
    target_bar = go.Bar(x=df['Timestamp'],
                    y=df['CLEDelta'],
                    name='CLE Change',
                    marker=dict(color='#FFD700')
                    )
    model_bar = go.Bar(x=df['Timestamp'],
                       y=df['ModelDelta'],
                       name='Model Cange',
                       marker=dict(color='#9EA0A1'))
    data = [target_bar, model_bar]
    layout = go.Layout(title='Period by Period Change')
    fig = go.Figure(data=data, layout=layout)
    return fig



@app.callback(Output('daily_running_graph', 'figure'),
              [Input('interval_component', 'n_intervals')])
def updated_running_daily_total(n_intervals):
    data = pd.read_csv(filename, index_col='Timestamp', parse_dates=True, infer_datetime_format=True)

start = workdays.workday(datetime.today(), -1)
df_start = datetime(start.year, start.month, start.day, 15, 14)
df_end = data.index.max()

filtered_df = data.loc[df_start:df_end].copy()
filtered_df['ModelRunning'] = round(filtered_df['y_pred'] - filtered_df.loc[df_start]['y_pred'], 2)
filtered_df['CrudeRunning'] = round(filtered_df['CLE'] - filtered_df.loc[df_start]['CLE'], 2)
filtered_df['RunningDailyTotal'] = filtered_df['ModelRunning'] - filtered_df['CrudeRunning']

data = [go.Bar(x=filtered_df.index,
               y=filtered_df['RunningDailyTotal'],
               marker={'color': '#FFD700'}
               )]
layout = go.Layout(title='Running Daily Total',
                   )
return go.Figure(data=data, layout=layout)



@app.callback(Output('model_v_pred', 'figure'),
              [Input('interval_component', 'n_intervals')])
def update_running_graph(n_intervals):
    df = pd.read_csv(filename)

trace1= go.Scatter(x=df['Timestamp'],
                         y=df['CLE'],
                         name='Crude',
                         mode='lines',
                         marker={'color': '#FFD700'},
                         yaxis='y2'
                   )


trace2 = go.Scatter(x=df['Timestamp'],
                         y=df['y_pred'],
                         name='Model',
                         mode='lines',
                         marker={'color': '#9EA0A1'},
                         yaxis='y2'
                    )

trace3 = go.Bar(x=df['Timestamp'],
                y=df['ModelDiff'],
                name='Diff',
                marker={'color': 'lightblue'}

                )

data = [trace1, trace2, trace3]
layout = go.Layout(title='Crude vs Model',
                   yaxis=dict(
                       domain=[0, .25]),
                   yaxis2=dict(
                       domain=[.25, 1])
                   )



return go.Figure(data=data, layout=layout)
2

You can reduce the graph margins https://plot.ly/javascript/reference/#layout-margin

3 Likes
3

thanks that did the trick!